Scroll Trigger: How to play the whole animation not by every page scroll once it enters the trigger element?

[Laurence]

I have this animation that plays on every page scrolling. What I want to achieve is to play the whole animation from start to end once it enters the section. So when it enters the pinned element, it should play the whole animation, not by every page scroll.

 

A good reference is in here to better understand what will be the output
> https://squareup.com/us/en/why-square under `Look and feel like a pro` section.

Is this possible using scrolltrigger and gsap? I'm very new to this jquery plugin and still discovering the features and controls of this.

 

 

See the Pen jOxVMYy by laurence-albano (@laurence-albano) on CodePen

[Laurence]

6 minutes ago, Laurence said:

I have this animation that plays on every page scrolling. What I want to achieve is to play the whole animation from start to end once it enters the section. So when it enters the pinned element, it should play the whole animation, not by every page scroll.

 

A good reference is in here to better understand what will be the output
> https://squareup.com/us/en/why-square under `Look and feel like a pro` section.

Is this possible using scrolltrigger and gsap? I'm very new to this jquery plugin and still discovering the features and controls of this.

 

 

 

[GreenSock]

Sure, it's very possible. Just don't set scrub: true. Instead, you can use toggleActions. It's all in the docs. 

 

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

[Laurence]

Wow! Thanks!  Didn't know it was possible.

 

One more thing, how do we get rid of the pin-spacer extra height/padding when scrolling down? I can see that there's a lot of extra spacing when you scroll up/down before proceeding to another section.

 

I have reference this, it says to hardwire it on update function. I have tried several methods and can't seem to get it to work onUpdate function on my end..

 

[Rodrigo]

Hi Laurence,

 

The quickest way to do this is to reduce the end value, since you're just triggering the animation when the start point reaches the trigger element without any scrub.

 

If you'd prefer a different approach, please post a minimal demo with what you're trying to do.

 

Happy Tweening!!!