Jump to content
Search Community

Parallel Tween in Timeline

friendlygiraffe 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,

 

What is the simplest method for have a Parallel tween in the same Timeline?

 

I'm trying to have the circles play at the same time as the square, without having to add on "-=6" to the end:

tl.to("#square", 6, {scale:2})
.to("#circle", 1, {x:400})
.to("#circle", 1, {y:30})
.to("#circle", 1, {x:0})
.to("#circle", 1, {y:0})

Thanks

See the Pen KgvggK by friendlygiraffe (@friendlygiraffe) on CodePen

Link to comment
Share on other sites

Hello friendlygiraffe,

 

Normally you would use the position parameter. Just setting both the #square tween and the 1st #circle tween with the position parameter to 0 or the same label name.

 

.to( target, duration, vars, position )

Since it's so common to chain animations one-after-the-other, the default position is "+=0" which just means "at the end", so timeline.to(...).to(...) chains those animations back-to-back. It's fine to omit the position parameter in this case. But what if you want them to overlap, or start at the same time, or have a gap between them? No problem.

 

Multiple behaviors

 

You can define the position in any of the following ways:

  • at an absolute time (1)
  • relative to the end of a timeline allowing for gaps ("+=1") or overlaps ("-=1")
  • at a label ("someLabel")
  • relative to a label ("someLabel+=1")
tl.to("#square", 6, {scale:2}, 0)
.to("#circle", 1, {x:400}, 0)

// or with same label
tl.to("#square", 6, {scale:2}, "move")
.to("#circle", 1, {x:400}, "move")

Your other 3 #circle tweens would need to run after the first two tweens (#square and first #circle) since you cant give the 3rd, 4th, and 5th tween that same 0 position or same label name. since the next tween would override the previous tween with the same selector.

 

:)

Link to comment
Share on other sites

OK thanks, it seems like labels are the way to go, eg:

tl.add("circlestart",0);
tl.to("#square", 6, {scale:2})
.to("#circle", 1, {x:400}, "circlestart")
.to("#circle", 1, {y:30}, "circlestart+=1")
.to("#circle", 1, {x:0}, "circlestart+=2")
.to("#circle", 1, {y:0}, "circlestart+=3")

However, I would like the circles to 'Chain' normally, following each other sequentially without having to add the correct insertion point.

 

Eg, so I would like to achieve something like:

tl.add("circlestart",0);
tl.to("#square", 6, {scale:2})
.to("#circle", 1, {x:400}, "circlestart")
.to("#circle", 1, {y:30}, "circlestart+=1")
.to("#circle", 1, {x:0}, "circlestart+=1")
.to("#circle", 1, {y:0}, "circlestart+=1")
Link to comment
Share on other sites

Nested timelines are ok. In a simple way, you can do something like this: 

// make the circle animation
var circleTL = new TimelineMax();
  circleTL
  .to("#circle", 1, {x:400})
  .to("#circle", 1, {y:30})
  .to("#circle", 1, {x:0})
  .to("#circle", 1, {y:0});

// then nest it
var masterTL = new TimelineMax({repeat:-1});
  masterTL
  .to("#square", 6, {scale:2}, 0) // start at 0
  .add(circleTL, 0); // also start at 0
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...