Jump to content
Search Community

How to clear/stop all animations on array of elements.

OOPSStudio test
Moderator Tag

Recommended Posts

Let's say I have an array of objects that I'm animating. I run 3 animations on them each time they're clicked, and I run 1 animation on each every time any other one is clicked. (3 animations to get from dormant -> active, 1 animation to go from active -> dormant.)

 

If I click two of the objects rapidly, then the dormant -> active animation completes after the active -> dormant animation and the dormant elements appear with active styling... So, my solution would be to clear their animations each time they're returned to dormant, therefor preventing them from being stuck in active. How could I do this?? I would want something like nameOfArrayHoldingAllObjects.killAllAnimationsAndReturnToZeroProgress()

 

I've been searching the forums and the videos and everything I can, but I can't find something like this anywhere. I found something called kill(), but that only works for timelines. I also found something like killAll() but if I try to use that I get an error...

 

My code so far:

<script>
    var circles = document.getElementsByClassName("circle");

    gsap.from(circles,{
        duration: 0.5,
        x: -50,
        opacity: 0,
        rotation: 180,
        ease: "back",
        stagger: 0.1
    });
    $(".circle").hover(function(){
        gsap.to(this,{
            duration: 0.2,
            opacity: 0.5
        });
        document.body.style.cursor = "pointer";
    },function(){
        gsap.to(this,{
            duration: 0.2,
            opacity: 1
        });
        document.body.style.cursor = "default";
    });
    $(".circle").click(function(){
        // Here is where I would like to clear all animations on all circles, something like `circles.killAllAnimationsAndReturnToZeroProgress()`
        gsap.to(circles,{
            duration: 0.5,
            scale: 1,
            ease: "bounce",
            rotation: 0,
            backgroundColor: "red"
        });
        gsap.to(this,{
            duration: 0.5,
            scale: 1.2,
            ease: "bounce"
        });
        gsap.to(this,{
            duration: 1,
            rotation: 90,
            ease: "bounce",
            backgroundColor: "blue"
        });
    });
</script>

 

Link to comment
Share on other sites

  • OOPSStudio changed the title to How to clear/stop all animations on array of elements.

You might want to look into the "overwrite" special property: 

  • overwrite: true immediately kills all animations of the same targets, regardless of what properties they're affecting. 
  • overwrite: "auto" only kills the individual parts of other active tweens of the same targets that are affecting the same properties. 

But to answer your original question most directly, I assume you're looking for gsap.killTweensOf()

 

And you can kill() any animation. Tweens and Timelines both have that method. There are actually quite a few ways to do what you're asking. If you still need some help, please provide a minimal demo so that we can see the context and quickly show you how to tweak the code. 

 

Happy tweening!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...