Share Posted February 21, 2017 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 More sharing options...
Share Posted February 21, 2017 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. 1 Link to comment Share on other sites More sharing options...
Author Share Posted February 21, 2017 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. See the Pen WRVyzv by c308marketing (@c308marketing) on CodePen Link to comment Share on other sites More sharing options...
Share Posted February 21, 2017 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. 2 Link to comment Share on other sites More sharing options...
Share Posted February 21, 2017 Im also getting a JS error on your codepen Error: Bootstrap tooltips require Tether (http://tether.io/) 1 Link to comment Share on other sites More sharing options...
Author Share Posted February 21, 2017 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 More sharing options...
Share Posted February 21, 2017 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. 1 Link to comment Share on other sites More sharing options...
Author Share Posted February 21, 2017 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. 1 Link to comment Share on other sites More sharing options...
Share Posted February 21, 2017 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now