Jump to content
GreenSock

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

Create a label offset from the previous tween

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

I feel like I'm still not really getting how to accomplish the timing I'm after with labels and offsets. Take the following example:

new TimelineLite()
  .to(myElement, 6, { x: 200 });
  .addlabel('otherStuff+=3')
  .to(anotherElement, 3, {rotation: 360}, 'otherStuff')
  .to(myElement, 3, {y: 60}, 'otherStuff')
  .to(thirdElement, 3, {rotation: -360}, 'otherStuff')

Here's what I would expect to happen here:

 

  • myElement changes x position for 6 seconds
  • 3 seconds pass
  • The remaining 3 tweens all happen at the same time (coinciding with the location of the 'otherStuff' label)

 

But this isn't what happens. How can I accomplish something like this?

Link to comment
Share on other sites

Hi,

 

This is actually a very simple issue, the addLabel() method accepts two parameters, first what you're adding to the timeline and second when or where you're adding it.

var tl = new TimelineLite();

tl.addLabel(labelName, position);

In you're case you're passing a string with a relative position in it. I'm not completely sure about this, but my guess is that GSAP reads that string and interprets that you're passing a position string. Since it has the += in it the engine says, "ok 3 seconds after the label". So what happens is that first, you're not passing a label string properly and, second you're positioning "nothing" three seconds after a label that doesn't exists.

 

This code should work:

new TimelineLite()
  .to(myElement, 6, { x: 200 });
  .addlabel('otherStuff','+=3')
  .to(anotherElement, 3, {rotation: 360}, 'otherStuff')
  .to(myElement, 3, {y: 60}, 'otherStuff')
  .to(thirdElement, 3, {rotation: -360}, 'otherStuff')

See the Pen sCfok by anon (@anon) on CodePen

 

Rodrigo.

  • Like 2
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.
×