Jump to content

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

GSAP / Scrollmagic / DrawSVG Reverse Tween Problem

Recommended Posts



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.



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




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

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.



  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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!



  • Like 3
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.