Jump to content


Reverse a Morph and then fluidly repeat from the start

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



I'm doing a simple morph that repeats between two shapes (with a rotation on as well).  When the animation runs, it morphs, then seems to pause for 3 seconds, then seems to do a fluid repeat morph between the two states (which is what I want), and then starts again?


How do I get a morph to fluidly go from one shape to another on repeat with out the pause.  I'm using yoyo: true as well and thought this would solve it?


I'm flummoxed.


var tl = new TimelineMax({repeat: -1, yoyo: true});

.to("#shape-1", 3, {morphSVG:"#shape-2", rotation: 180, ease: Power1.easeIn})
.to("#shape-2", 3, {morphSVG:"#shape-1", rotation: 180,ease: Power1.easeOut})


Many thanks,

See the Pen wxoaXB?editors=1000 by pauljohnknight (@pauljohnknight) on CodePen

Link to comment
Share on other sites

Hi @pauljohnknight :)


That three second delay is your second tween:

.to("#shape-2", 3, {morphSVG:"#shape-1", rotation: 180,ease: Power1.easeOut})


That morph is happening but #shape-2 is hidden so you see nothing. If I understand your desired outcome correctly, you only need the first tween on the timeline.



See the Pen ajBNWL by PointC (@PointC) on CodePen

Is that what you meant?


Edit: Shaun is typing fast today. :D

  • Like 3
  • Haha 2
Link to comment
Share on other sites

Thanks for both answers

The problem was being caused by my second tween - I didn't realise when returning to the original svg shape with MorphSVG that you need to reference it in both parts of the tween.  Shaun's tip of having the rotation outside of the morphing was very useful as well.

Thanks again



  • Like 1
Link to comment
Share on other sites

For a seamless rotation you can also set that rotation ease to Linear.easeNone


See the Pen pZNdPd by PointC (@PointC) on CodePen

Happy tweening.




  • Like 1
Link to comment
Share on other sites

Hi Craig,


Yes i did end up doing that actually when I was playing around with the easings. 

In relation to this, I've used a Sine ease with an easeIn and easeOut to try and get the morph as smooth as possible on each of the two morph tweens.  I guess there will always be a slight jerk effect because the morph has to stop and restart? Even if I was to use the custom ease plugin?


Updated pen for quick reference.


See the Pen wxoaXB by pauljohnknight (@pauljohnknight) on CodePen


Link to comment
Share on other sites

Are you looking for more of a smooth pulse here? If that's the case, I think a Sine.easeInOut would probably work well. Here's a fork of your pen:


See the Pen GBNyEM by PointC (@PointC) on CodePen


I commented out the rotation and cranked the timeScale up to 10 so it's easy to see what's happening. Is that more the look you wanted?


Happy tweening.



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