Jump to content
Search Community

Creating JS controller to activate Tweens

mikekerby test
Moderator Tag

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I am trying to create an animation using GSAP and ScrollMagic. 

 

The first codepen includes the desired animation. I am trying to trigger this at various parts through the animation. 

See the Pen RKXJQE by c308marketing (@c308marketing) on CodePen

 

The second codepen is the controller I am trying to build to accomplish this. What am I doing wrong? 

 

Also, there is a black box that is covering the text that fades in…not sure where that is coming from either. 

 

 

Any help would be greatly appreciated. 

See the Pen WRVyzv by c308marketing (@c308marketing) on CodePen

Link to comment
Share on other sites

Hi mikekerby  :)

 

Welcome to the GreenSock forum.

 

You're not doing anything wrong. You're just missing the ScrollMagic GSAP plugin. Please add this script to your pen:

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

Happy tweening.

:)

Thank you for the quick reply. I added the animation.gsap.js to the pen and it still doesn't work. 

Link to comment
Share on other sites

Looks like there is one more fix necessary. Lines 32 and 33:

TweenMax.fromTo("#path1", 1, {drawSVG:0},), // missing to
TweenMax.fromTo("#path2", 1, {drawSVG:0, delay:0.5}), // missing to

These are fromTo() tweens so they need a fromVars:Object and a toVars:Object. Drop in your ending values and you should be good to go.

 

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

 

Looks like there is one more fix necessary. Lines 32 and 33:

TweenMax.fromTo("#path1", 1, {drawSVG:0},), // missing to
TweenMax.fromTo("#path2", 1, {drawSVG:0, delay:0.5}), // missing to

These are fromTo() tweens so they need a fromVars:Object and a toVars:Object. Drop in your ending values and you should be good to go.

 

Happy tweening.

:)

 

I get an error in my console from the ".setTween" function. Is this the correct syntax for that function.

See the Pen WRVyzv%C2%A0 by c308marketing (@c308marketing) on CodePen

 (It still doesn't recognize the trigger element on the page)

Link to comment
Share on other sites

  • Solution

Your pen still wasn't loading the ScrollMagic GSAP plugin I mentioned in Post #2. Here's a fork of your pen with that added:

 

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

 

It all looks like it's working to me. I'm not seeing any setTween error now. I am still seeing the Bootstrap error Jonathan mentioned in Post #5, but it doesn't look like it's preventing anything from working. I don't know anything about Bootstrap so you'll have to investigate that one.

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

Your pen still wasn't loading the ScrollMagic GSAP plugin I mentioned in Post #2. Here's a fork of your pen with that added:

 

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

 

It all looks like it's working to me. I'm not seeing any setTween error now. I am still seeing the Bootstrap error Jonathan mentioned in Post #5, but it doesn't look like it's preventing anything from working. I don't know anything about Bootstrap so you'll have to investigate that one.

 

Happy tweening.

:)

THANK YOU!!! It works now. Funny thing I had it linked on my dev environment. Must have had a typo or something in there. Thank you for your time on this. 

  • Like 1
Link to comment
Share on other sites

You're welcome. :)

 

Just another little tip. We recently had another ScrollMagic/GSAP question about tweens firing before the scroll trigger was reached. We discovered that the ScrollMagic GSAP plugin was being loaded before TweenMax so the plugin couldn't prevent the tweens from playing.

 

So for anyone reading this - be sure to load TweenMax before the ScrollMagic GSAP plugin.

 

Happy scrolling.

:)

  • Like 2
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.
×
×
  • Create New...