Infinitely morph between two svg paths with a delay inbetween

[Irfanm 2 Likes (Newbie)]

Hi, I was trying to watch through the tutorial videos and I didn't see something for iteration count for a morph, is this possible with gsap? I already love all the amazing things I've been able to do, but how could I morph path with id #A to sibling path with id #B and then #B to #A, in an alternating direction indefinitely with a 3second delay inbetween? So it says on each morph for 3 seconds and then morphs to the other.

 

I apologize if I am asking too much. Also, is there callback functions? What would this line look like if I did the above, but once B was finished, a function was called.

 

Thank you

[PointC 8,599 Likes (Superhero)]

Hi @Irfanm

 

Yes - you can certainly create an infinite repeat with a delay. The easiest way would be setting yoyo:true and repeat:-1. Something like this:

TweenMax.to("#pathA", 1, {morphSVG: "#pathB", repeat:-1, repeatDelay:3, yoyo:true});

 

If you want to set a certain number of repeats and then call a function, you'd write it like this:

TweenMax.to("#pathA", 1, {morphSVG: "#pathB", repeat:3, repeatDelay:3, yoyo:true, onComplete:onComplete});

function onComplete() {
  console.log("done");
}

 

More info in the docs:

https://greensock.com/docs/TweenMax

https://greensock.com/docs/TimelineMax

 

Hopefully that helps. Happy tweening.

 

[Irfanm 2 Likes (Newbie)]

Thank you very much! This helped me figure out exactly what I needed to do!