Deon Sosa

This works great! Thank you. I'm just curious why the way I was trying to do it doesn't work. Does setting the duration messes up with the timing of the animation ? Any insights on that ?

I'm trying to achieve an animation where the user hovers over a header. On mouseenter the animation should start playing with a pre-defined duration. On mouseleave the animation should reverse with another duration (a much faster one). My problem is that on mouseleave the animation doesn't reverse from where it was left off, it seems to be reversing randomly. If you hover over the title and rapidly hover off you can clearly see what I'm talking about. I tried to set the time of the animation on mouseleave so it keeps tracks of where it was but it doesn't seem to work either.

Here it is https://codepen.io/jorgeduardo/pen/XwRXgB

Ohh I see!. It wasn't working for me cause I was reusing the variable on the new Tween so it was using the old path. Instead I just have to target the path again. Thank you !

I ended up using the ideas described here. On pause I'm making a copy of the path being morph and then morphing that copy to the desired path. I'll make a pen showing the result. Thank you @mikel @PointC and @Dipscom !

I didn't create a demo because I am not sure on how to approach the problem. I'll try to explain it better. Let's say I have an SVG with three paths (a,b,c). I'm morphing path a to path b back and forth using TimelineMax and morphSVG. This morph takes 20 seconds to complete. Let's say 5 seconds of the animation have passed and the user starts to scroll. Using ScrollMagic I'm trying to morph to path c from whatever the state of the svg is at 5 seconds into the animation. Hopefully this clarifies my problem.

What I'm trying to achieve, is having GSAP looping trough some svgs and morphing them using MorphSVG. Then using ScrollMagic to pickup wherever the loop is and morph to a specific svg on scroll. Is this possible ? What I'm doing is initializing TimeLineMax and adding a tweenlite to morph the svg. Then using ScrollMAgic to add the other tweenlite on scroll. This does not work since ScrollMagic pauses the TimelineMax loop. Any help would be appriciated.