Jump to content

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

Starting animations below the "foldline" of the screen

Recommended Posts

I am doing my first GSAP  animation (yay for me)! The div containing the animation is below the screen when the page loads -- both on desktop and mobile.
I don't want it to begin animation until the user scrolls to it. I want to verify that, in order to do this, I need to do something like the following:
myTimeline.to('body', .5, {scrollTo:{y:250}});


with "250" being the distance of the div from the top of the page.


Is this correct?

Link to comment
Share on other sites

Hi saracup,


If I understand you correctly, you want the animation paused until the user manually scrolls to the div containing your timeline.


If that's the case, you'll probably want to use something like ScrollMagic or waypoints to trigger the animation when the user scrolls to the containing div. One of the forum users here (ihatetomatoes ) has excellent info and tutorials about ScrollMagic: https://ihatetomatoes.net/simple-scrollmagic-tutorial/


The GSAP ScrollTo plugin that you are showing in your question will animate the window or a div position, but it sounds like you're wanting the user to scroll manually in which case you wouldn't need that plugin. Of course, you could certainly use the ScrollTo plugin to animate the window scroll to the div containing your main animation and then have it start as well. 


I hope this helps. Happy tweening.


PS The best way to get specific answers to specific questions is to make a CodePen demo: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

  • Like 5
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


As Point suggested ScrollMagic is a good choice for this type of stuff.


Although, if you're looking for a single and simpler effect and don't need/want everything ScrollMagic has, you can try this simple approach:


See the Pen CFJri by rhernando (@rhernando) on CodePen


Basically detet the scroll value and start the animation. You can use or not the reverse part of that sample of course.

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