TimelineMax.StaggerTo with chained morphSVG

[elbenja 0 Likes (Newbie)]

Hello there,

 

I'm a complete newbie:
I animate this logo: 

The code is a mess, I had to create 6 timelines to do the same.

How can I make it a function, I figure StaggerTo() will do it, but I can't find  way to chain multiple morphSVG ...

 

Is this possible?

 

Thanks in advance.

 

See the Pen ORromA by silverdesk (@silverdesk) on CodePen

[PointC 8,599 Likes (Superhero)]

Hi elbenja 

 

Welcome to the GreenSock forums.

 

You could use stagger on that, but it won't give you the endless/seamless loop you're probably looking for. You'd do that like this:

tl.staggerTo('.st0', .3, {morphSVG:'#step1', stroke:'#005F8F', opacity:1, ease: Power0.easeNone}, 0.3)
  .staggerTo('.st0',1.2, {morphSVG:'#step2', stroke:'#FF1783', strokeWidth:5, ease: Power0.easeNone}, 0.3, 0.3)
  .staggerTo('.st0', .3, {morphSVG:'#step3', stroke:'#FF298D', opacity:0, strokeWidth:6, ease: Power0.easeNone}, 0.3, 1.5);

Here's a fork of your pen with that possibility:

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

 

I'd recommend using jQuery each() and create an infinitely repeating timeline for each element. You can then stagger the start times using the index of the element. That would get you the endless animation like your original with the 6 separate timelines. Like this:

$(".st0").each(function(i, element) {

var tl = new TimelineMax({repeat:-1, delay:i*0.3});

tl.to(this, .3, {morphSVG:'#step1', stroke:'#005F8F', opacity:1, ease: Power0.easeNone})
  .to(this, 1.2, {morphSVG:'#step2', stroke:'#FF1783', strokeWidth:5, ease: Power0.easeNone})
  .to(this, .3, {morphSVG:'#step3', stroke:'#FF298D', opacity:0, strokeWidth:6, ease: Power0.easeNone});
}); 

Here's a fork of your pen with that solution:

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

 

Hopefully those possibilities help a bit.

 

Happy tweening and welcome aboard.

[elbenja 0 Likes (Newbie)]

Wow...

That's exactly what I was aiming for

The  jQuery option will do, Clean and tidy. 

 

Thank you so much @PointC !!!

 

* I'm new with GSAP, but I'm loving the possibilities