[TweenMax time and reverse]

20 minutes ago, PointC said:

Rather than changing the duration each time, I think changing the timeScale() will give you the desired results.

 

title.mouseenter(function(){
    animation.play().timeScale(1);
})
title.mouseleave(function(){
    animation.reverse().timeScale(20);
})

 

Happy tweening.

 

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 ?

[TweenMax time and reverse]

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.

See the Pen NZpvzm?editors=0010 by jorgeduardo (@jorgeduardo) on CodePen

[MorphSVG Loop and Scrollmagic]

Here it is

See the Pen XwRXgB by jorgeduardo (@jorgeduardo) on CodePen

[MorphSVG Loop and Scrollmagic]

3 minutes ago, Dipscom said:

Deon, did you see my update on my first response? It turns out there is no need to make a copy of the path, you can tween straight away.

 

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 !

[MorphSVG Loop and Scrollmagic]

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 !

[MorphSVG Loop and Scrollmagic]

4 hours ago, PointC said:

I'm not sure I follow your question, but I think it's safe to say there would be a solution to have the two libraries work well together for your needs.

 

Maybe you could make a demo?

Thanks.

 

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.

 

 

 

[MorphSVG Loop and Scrollmagic]

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.