Starting animations below the "foldline" of the screen

[saracup]

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?

[PointC]

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/

[Rodrigo]

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.