Jump to content
GreenSock

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

Don't start animation till section is reached

Recommended Posts

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

Link to comment
Share on other sites

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.

:)

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

:)

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