Share Posted June 9, 2018 Hello. Thanks as always for the awesome product! This problem is driving me nuts, and i know this includes Scrollmagic, but can you just tell me WHY this doesn't work? I'm sure you've seen it before and maybe have a simple answer. WHAT IS SUPPOSED TO HAPPEN My svg animation is supposed to play on init, then when i scroll up, the animation reverses, and when I scroll back down, it plays again. Here's a pen of just the animation and some play and reverse buttons that is working as it should without scrollmagic. See the Pen gKgXoB by naaadz (@naaadz) on CodePen THE PROBLEM Once I define the reverse tween for scrollmagic (even using pause:true) it shows the svg statically on init, it won't play. Here's my pen that just won't work: See the Pen wXgrLX by naaadz (@naaadz) on CodePen Can you please show me how I can play this animation and still use scrollmagic? Any insight you have will be greatly appreciated! See the Pen wXgrLX by naaadz (@naaadz) on CodePen Link to comment Share on other sites More sharing options...
Share Posted June 9, 2018 Hi @naaadz If I understand your question correctly, the animation should play on page load and that has nothing to do with the ScrollMagic triggers, right? After that initial play, you want ScrollMagic to control the timeline? If that's the case, I think an easy approach would be to allow the timeline to play normally on load and when it's complete, you then create the ScrollMagic scene. That way ScrollMagic won't hijack the tween on page load. It will wait until that first play is finished. Something like this. See the Pen dKNJMg by PointC (@PointC) on CodePen Does that help? Happy tweening. 3 1 Link to comment Share on other sites More sharing options...
Author Share Posted June 9, 2018 Craig, you saved my life! I tried the idea of a callback before and couldn't get it to work, but your line#24 is what did the trick! .setTween(TweenMax.fromTo(tl, 1, {progress:1}, {progress:0})) Somehow wrapping my timeline inside another one like this makes it work. Thanks also for covering this even though it's an external plugin unrelated to GSAP, you're my hero! 3 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