How Can I use Ease animation and ScrollTrigger together

[samuele olindo]

Hi guys i'm quite new to developing and I found the amazing GSAP animations world. My question is: I made this little text animation with GSAP but it will trigger automatically whenever I load the website. Is there a way to make it trigger just when I'm in viewport on the section where the animation is? Maybe with ScrollTrigger? Any help would be great and  any code snippets would be awesome. Thank you!

See the Pen eYEaNLW by SamFrontDev (@SamFrontDev) on CodePen

[OSUblake]

Welcome the forums @samuele olindo

 

ScrollTrigger is definitely what you should be looking at. 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Be sure to check out all the demos listed towards the end of the document. 

 

[GreenSock]

A few other tips:

• You're using the same id (#create and #create1) for a bunch of different elements which is invalid. Use classes instead for that. 
• There's no such ease as "SlowMo.easeOut". I'm curios where you got that. Perhaps you meant "slow"? If so, make sure you load EasePack too because that's one of the few eases that isn't in the core. 
• Always set your transforms directly through GSAP. See this. 
• If you want to use percentage-based y transforms, use yPercent. It's super convenient because you can stack that with normal "y" values too (not that you need it here). 
• You never need to say stagger: 0 because that's the default. 
• Instead of using delays, you could use the position parameter (it's not wrong to use delays though). 

Maybe this will help as a jumping-off point: 

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

[samuele olindo]

@OSUblake @GreenSock thank you guys for the help and for the precious tips, i'm new and really needed those.

13 hours ago, OSUblake said:

Welcome the forums @samuele olindo

 

ScrollTrigger is definitely what you should be looking at. 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Be sure to check out all the demos listed towards the end of the document.