Jump to content
Search Community

Is it possible to add to timeline tween a parameter, to create a new label, as well as, a position parameter

brightpixels 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

I have completed the "position" challenge: 

See the Pen veMbEQ by codeload (@codeload) on CodePen

 and it works as expected.

 

However, there is something I tried initially and am trying to understand/confirm why it doesn't work. Is it possible to create a label and specify a position parameters at the same time on a timeline tween, as am doing below?

 

var carLiftDuration = 2;
tl.to(car, 2, {x:445})
  .to(man, 1, {x:-150}, "-=1")
  .to(car, carLiftDuration, {y:"-=160"}, "liftOff", "+=1") // Create a new label, as well as, offsetting this tween
  .to(lift, carLiftDuration, {y:"-=160"}, "liftOff");

 

Link to comment
Share on other sites

Hi @brightpixels :)

 

If you want a tween to start relative to a label, you can .add() the label and then offset any tweens you like. Something like this:

 

tl.to(car, 2, {x:445});
tl.to(man, 1, {x:-150}, "-=1");
tl.add("liftOff");
tl.to(car, carLiftDuration, {y:"-=160"}, "liftOff+=0.5"); // start 0.5 seconds after liftOff label
tl.to(lift, carLiftDuration, {y:"-=160"}, "liftOff");

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

@PointC I don't think you understood my question so let me try again please see my comment against the code lines

 

  .to(car, carLiftDuration, {y:"-=160"}, "liftOff") // Tween to start moving car up. Also, this creates a new label called "liftoff". Is it possible to add a delay/offset to this newly created label???
  .to(lift, carLiftDuration, {y:"-=160"}, "liftOff"); // Tween to move the lift up at same time as label "liftoff", which should result both objects to go up same time

 

I understand how to create labels with the "tl.add('liftOff')"  and how to add an offset/delay with this syntax like this ".add('liftOff", "+=5')". I wanted to see if a delay/offset could be added when creating a new label on a tween code line

 

Btw, for your code snippet in your last reply, I would need to add the offset to the last line as well to ensure both object go up same time.

 

Link to comment
Share on other sites

It's possible, but not necessarily very elegant. add() allows you to add an array of things to a timeline at any position. So you can add your tween and label to the same offset time like

.to(elem, 1, {x:200})
.add([TweenLite.to(car, carLiftDuration, {y:"-=160"}, "liftOff"], "+=10")// adds tween and label 10 seconds after previous tween ends

 

frankly, I would much prefer to add the label first where it should go and then the tween. Much more readable
 

.add("liftOff", "+=10")
.to(lift, carLiftDuration, {y:"-=160"}, "liftOff");

 

  • Like 1
Link to comment
Share on other sites

Sorry about that. Yeah  - I guess I read your question too quickly.

 

As @Carl mentioned, it can be done, but it's a bit messy. Just my two cents worth, but I always add() labels to my timelines. It's easier to spot them when glancing at the code and so much easier to move them, change their relative start time etc...

 

Happy tweening.

:)

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