Animate elements when section is in viewport.

[midnightgamer]

I new in GSAP and trying to learn it by cremating new sites.

 

What problem I am facing is I have 4 section and I am using fullPage.js to scroll 1 section at a time. I am using gsap to animate some elements. But all elements are getting animated. I want to stop it. Anyone help me thanks in advance,

 

https://codesandbox.io/s/pedantic-mestorf-d8znp?file=/src/App.js:389-412  Sandbox 

[ZachSaucier]

Hey midnightgamer and welcome.

 

This is because you have all of your tweens in the mounting callback which means that they will all run on load. Additionally you are using general targets, not ones specific to the section being scrolled to. You should instead create the animations beforehand using a loop, keep them paused, and when fullPage tells you that a slide has been scrolled to then you run the animations for that particular section. I write extensively about how to do so in my article about animating efficiently which I highly recommend that you give a thorough read  

 

Additionally you're using the old GSAP 2 formatting. We highly recommend the newer, more condensed syntax:

 

 

Once you've gone through those and updated your project I bet you can figure it out. But if you get stuck let us know and we'll do our best to help.