Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Stefano Monteiro

ScrollTrigger Batch Play Animation Once

Go to solution Solved by GreenSock,

Recommended Posts

Hi ,

 

How can I make it so that the animations play when the elements enter the screen for the first time only? Currently, if we scroll back up and enter the trigger zone from the top the animation will play again. Ideally, I want to avoid it.  

 

I am also struggling to have the elements hidden before triggering the animation.

 

Finally,  it seems to have a bug. When we scroll back up and back down into the trigger zone before the animation ends,  it will play only until the time the animation was at when we entered the trigger zone again. 

 

 

PS: It's the second time I am opening a topic for this regard.

 

Thanks

See the Pen RwKmNqw?editors=0010 by stefanomonteiro (@stefanomonteiro) on CodePen

Link to comment
Share on other sites

  • Solution
2 hours ago, Stefano Monteiro said:

How can I make it so that the animations play when the elements enter the screen for the first time only? Currently, if we scroll back up and enter the trigger zone from the top the animation will play again. Ideally, I want to avoid it.  

Just add once: true :)

 

2 hours ago, Stefano Monteiro said:

I am also struggling to have the elements hidden before triggering the animation.

That's  because your .from() animation isn't getting triggered until the elements enter the viewport. It'd be much better to just set() their state initially, and then do a .to() tween to their final state. 

 

2 hours ago, Stefano Monteiro said:

Finally,  it seems to have a bug. When we scroll back up and back down into the trigger zone before the animation ends,  it will play only until the time the animation was at when we entered the trigger zone again. 

That's a logic issue in your code. You're using a .from() which uses the CURRENT values as the end values, thus if you fire that off while it's in the middle of animating, the current values will be those inbetween ones. It's one of the most common mistakes

 

Here's a fork: 

See the Pen ExWxZGz?editors=1010 by GreenSock (@GreenSock) on CodePen

 

There's actually no reason to even use batch() here. You could simplify things like this: 

See the Pen zYZYNbQ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

  • Like 2
Link to comment
Share on other sites

That's really helpful. Thank you very much.

 

And thanks for the non batch version as well. I have tried implementing that way too and had failed. Now I can do both. Thanks

  • 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.
×