Jump to content

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

Animate elements when section is in viewport.

Recommended Posts

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 

Link to comment
Share on other sites

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.

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