Jump to content
Search Community

Parallel and Staggered Animations

fencepencil 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 GSAP Community!


I have a small problem and haven't seemed to be able to resolve it via Google... 


I'd like if this SVG and all the paths would start to animate at the same time. As you can see the first animation happens, then the second, then the first... 


I've tried setting ", 0" at the end of each animation and also tried the position parameter by naming them. Nothing seems to be working. I'm probably just overlooking something simple. Any help is appreciated.

See the Pen 372ebab2b4e1610fac1dd03dfe0a0bf0 by fencepencil (@fencepencil) on CodePen

Link to comment
Share on other sites

Hi @fencepencil,


Take a look at these remarks: Understanding the Position Parameter (here).


Your code line 6 and line 8 looks like you want a yoyo-effect
('yoyo: true') - maybe like this:


TweenLite.set(".circle", {transformOrigin: 'center'});
TweenLite.set(".circle-tail", {transformOrigin: '100% 50%'});

var tl = new TimelineMax({repeat:-1, yoyo:true})	
	.fromTo(".circle", .4, {scale:0.8}, {scale:1.3},0)
	.fromTo(".circle-tail", 4, {rotation: 7}, {rotation: -7},0)

Or every tween for themselves:


TweenLite.set(".circle", {transformOrigin: 'center'});
TweenLite.set(".circle-tail", {transformOrigin: '100% 50%'});

var tl = new TimelineMax()	
	.fromTo(".circle", .4, {scale:0.8}, {scale:1.3, repeat:-1, yoyo:true},0)
	.fromTo(".circle-tail", 4, {rotation: 7}, {rotation: -7, repeat:-1, yoyo:true},0)


Happy tweening ...


  • Like 3
Link to comment
Share on other sites

Well that seems to work just great, thanks Mikel!


I guess I'd like to know what the difference is ... with this code:


var tl = new TimelineMax({repeat:-1, yoyo:true});
      .set(".circle", {transformOrigin: 'center'})
      .set(".circle-tail", {transformOrigin: '100% 50%'})
      .fromTo(".circle", .4, {scale:0.8}, {scale:1.3}, 0)
      .to(".circle", .4, {scale:0.8})
      .fromTo(".circle-tail", 4, {rotation: 7}, {rotation: -7}, 0)
      .to(".circle-tail", 4, {rotation: 7});


... and yours. You pulled out the .to's and just combined everything into one line (the .fromTo). You also set transform origin before declaring the variable. Is that best practice? I'm just trying to understand why using .set inside the timeline makes such a difference. And why .fromTo followed by .to doesn't seem to work with timing.


One more quick question; to introduce each ".circle" with some delay, so they orb at different frequencies, would I just create #id's for each dot inside the SVG and target those with a delay?


Man, this stuff is confusing lol

Sorry for all the newbiness :)


Thank you for the help tho!


Link to comment
Share on other sites

Thought I'd share what I came up with. I ended up using TweenMax instead of TimelineMax. Sounds obvious, but TimelineMax is used for animation scenes when things need to start at different times. This wasn't what I was after. 


Gotta say, I love that yoyo:true ha!


See the Pen e3f46c46e9103b3d9a989b07bbc8a254 by fencepencil (@fencepencil) on CodePen


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