Newbie question - start animation when section visible on screen

[jmarc 2 Likes (Newbie)]

Hello there.  I have used TweenMax many moons ago in Flash projects, but am now hunting for a good toolset to animate in HMTL5/JS/CSS.

 

This is an interesting, but way too simple, tool.  The one thing it does well is that the animations are triggered only when the object is visible on the screen.  Thus a long, scrolling site can have visual animations as you scroll down.  Can TweenMax be triggered in a similar way?

 

http://mynameismatthieu.com/WOW/

[funkybudda 10 Likes (Newbie)]

I highly recommend scrollmagic.js (which works very well with GSAP) for the effect you need:

 

https://ihatetomatoes.net/simple-scrollmagic-tutorial/

 

 

http://scrollmagic.io/examples/index.html

 

 

 

[Jonathan 5,176 Likes (Superhero)]

Yep funkybudda is right. ScrollMagic is actually made with GSAP, and provides a nice little API to manage and queue your scrolling animations.

 

Or you can try and use the GSAP scrollToPlugin, but that would require you to do more custom coding to get all the bits and pieces to work.

 

[jmarc 2 Likes (Newbie)]

Thanks so much for the prompt and helpful replies.  I have implemented ScrollMagic into my development work with only a few hiccups, but looks solid.  Very happy I can use TimelineMax and it together - that's the win!!