scrolltrigger only scrolldown

[Lovestoned]

I want to animate my .text1 element only when I scroll down...and don't want to animate back when scroll up...I saw once:true but when I use it there is a space before first section after timeline reach end...

See the Pen dyOLjyb by ersenturgut (@ersenturgut) on CodePen

[ZachSaucier]

Hey Lovestoned.

 

There is no getting around this space using your current approach because it's a logical issue. You're setting the transforms of your sections down 3 full screen sizes with transforms (one from the pin, the others from the yPercent: 300). So logically using that approach there's going to be 300vh of space at the top.

 

I'd probably set it along the lines of this:

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

 

Again, please avoid the most common GSAP mistakes of using the duration parameter, using string values unnecessarily, and animating non-performant properties like top.

[ZachSaucier]

Evidently there's a "secret" second parameter for ScrollTrigger's .kill() method called allowAnimation which makes this a little cleaner:

See the Pen poNBOMy by GreenSock (@GreenSock) on CodePen

[Lovestoned]

thank you dear Zach...I learned one more thing...

[PointC]

3 hours ago, ZachSaucier said:

Evidently there's a "secret" second parameter

Typical @GreenSock. Adds cool features and keeps them a secret. 

[Lovestoned]

when I scroll down and finish first section animation...3rd section jumping after it...cannot see section2 (orange one)...but when I scroll up orange section I can see...

[ZachSaucier]

Are you saying that that occurs in the demo I posted above for you? I always see the second section.

 

If it's with your own code, please make a minimal demo of the issue.