Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
elbenja

TimelineMax.StaggerTo with chained morphSVG

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

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

Link to comment
Share on other sites

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

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 

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.

×