Jump to content

Deon Sosa

  • Posts

  • Joined

  • Last visited

Posts posted by Deon Sosa

  1. 20 minutes ago, PointC said:

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




    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 ?

  2. 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

  3. 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 !

    • Like 1
  4. 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?



    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.




  5. 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.