Jump to content
Search Community

TimelineMax.StaggerTo with chained morphSVG

elbenja test
Moderator Tag

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

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.
:)
  • 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.
×
×
  • Create New...