Innovative Concept
I am currently working on developing a unique carousel design. The main concept is to have the image gradually zoom in at the beginning of each carousel "page".
The Challenge
In order to achieve the desired outcome, I experimented with changing the scale of the background image using a transition effect. By enclosing it in a container with overflow:hidden, I was able to make it work smoothly. However, a new issue arose when trying to start the next carousel page with the image "zoomed out" again. Resetting the scale back to 1 didn't provide an instant zoom-out effect due to the ongoing CSS transition.
One potential solution would be to temporarily remove the class from the element, reset the scale, and then reapply the class. Strangely, this approach did not yield the expected results.
An additional challenge is the limited browser support for the scale property: https://caniuse.com/?search=scale
Sample Code Snippet
let scaled = false;
const test = document.getElementById("test");
window.addEventListener("click", function()
{
if(scaled)
{
// Remove the class
test.classList.remove("foo");
scaled = false;
// Reset the scale
test.style.transform = "scale(1)";
// Add class back in making sure the animation should be updated
window.requestAnimationFrame(() => {
test.classList.add("foo");
});
}
else
{
// Leave the animation running
scaled = true;
test.style.transform = "scale(0.5)";
}
}).foo {
width: 500px;
height: 500px;
background: blue;
transition: transform 2s;
}<div id="test" class="foo">
</div>For optimal performance, run the above code snippet in Firefox or Safari since other browsers do not fully support the scale feature at this time.
Upon first click, the animation behaves as intended. However, on subsequent clicks, the animation persists despite removing the class.
Seeking Guidance
Is there an alternative technique to achieve a similar effect without relying on scale?
Why does the animation continue even after removing the class?