GSAP / Scrollmagic / DrawSVG Reverse Tween Problem

[naaadz 5 Likes (Newbie)]

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

[PointC 8,599 Likes (Superhero)]

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.

 

[naaadz 5 Likes (Newbie)]

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!