Don't start animation till section is reached

[sreid62]

Hello Everyone

 

I am new to GSAP and have a created a few animations however, I have reached a point where I am stuck. 

 

I have created an animation in Greensock however, I don't want my animation to play until that particular section on the page is reached or at least when the section reaches the middle of the viewport. I have used Tween Max to create the animation. 

 

At the moment the animation plays as soon as the page loads, but I only want it to play once that particular Div is reached or it within the middle of the viewport. 

 

How do I pause the animation from the start until I reach that section then play it? 

 

I have attached a codepen for reference. 

 

Any help on this would be greatly appreciated 

 

Thank-you 

 

Sam

See the Pen xRBNmz by samjonreid (@samjonreid) on CodePen

[PointC]

Hi sreid62 

 

Welcome to the GreenSock forums.

 

ScrollMagic is great for that kind of thing.

 

http://scrollmagic.io/

http://scrollmagic.io/docs/

 

One of our forum moderators (Petr Tichy) has quite a bit of training available for it.

 

https://ihatetomatoes.net/blog/

https://ihatetomatoe...th-scrollmagic/

https://ihatetomatoe...agic-workshop/ 

 

If you're looking for ways to create that effect without any other libraries, we had a discussion over here:

http://greensock.com/forums/topic/14870-do-i-need-scrollmagic-to-use-gsap/

 

In particular, check Blake's answer here:

http://greensock.com/forums/topic/14870-do-i-need-scrollmagic-to-use-gsap/?p=63860

 

Hopefully that gets you started.

 

Happy tweening and welcome aboard.

[sreid62]

Hi PointC, 

 

Thanks very much for the speedy response. 

 

I have looked through the ScrollMagic documentation and in Titchy's videos he shows you how to add a class to an element once it reaches that section. However, I am using Greensock not CSS3 transition to control my animation. 

 

I followed the tutorial from Titchy and understood how it works, but I can't seem to apply that to a green sock animation.

 

Do you have any specific tutorials I can follow on how to pause TweenMax animation from the start and then trigger once the section is reached? 

 

Thanks in advance 

 

Sam

[PointC]

You can definitely use it with GSAP animations. What's not always obvious is that you need an additional file to make everything work:

https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js 

Here are the docs for that plugin:

http://scrollmagic.io/docs/animation.GSAP.html

 

Here's a CodePen that I used as answer for another forum question, but it has all the elements you need for ScrollMagic. You can fork it and mess around with it a bit to get the idea.

 

See the Pen JROqEA by PointC (@PointC) on CodePen

 

Hopefully that helps.

 

Happy tweening.