Jump to content
Search Community

Gsap Stagger animation issue

ReaganWP test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

Hi guys,  I am learning gsap and I found this issue with the stagger onClick when I click multiple times with the stagger controller buttons. 

e.g.

The monkeys should appear from the center since I click the center button but this is the result I am getting right now. No matter how many time I click the center button that is the animation I am getting.

Thank you in advance.

Screen Shot 2021-01-26 at 4.44.03 PM.png

See the Pen JjRgjgL?editors=1010 by reagandev (@reagandev) on CodePen

Link to comment
Share on other sites

  • Solution

Hey Reagan. If I open your demo then click the center button the monkeys are shown with a stagger animation from the center most monkey. 

 

With that being said, there is a logic issue if you click on any button before a previous button finishes. You're using a relative .from() tween each time which means that the end state will be the one when the button is clicked. That's actually one of the most common GSAP mistakes. There are a few ways of fixing it, but probably the easiest would be to use .fromTo() tweens instead.

  • Like 1
  • Thanks 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...