Can't offset Animation

[dada78]

Hi guys,

I am trying to offset my animation and just don't get what I am missing:

When I do the below the offset works:

var tl = new TimelineMax(); 

tl.fromTo("#element1", 7, {rotationY:0, rotationZ:-180}, {rotationY:360, rotationZ:180, x:1300, repeat:0}, 0)
.to("#element2", 7, {x:1300, rotation:360, force3D:true, transformOrigin:"50% 50%"}, -.5)

But when I use:

 .to("#element2", 7, {x:1300, rotation:360, force3D:true, transformOrigin:"50% 50%"}, "-=0.5")

it doesn't. I am pretty sure I used this syntax before. Does it differ between using TimelineLite and TimelineMax?

 

Thanks!

[Carl]

hmm, the first demo says uses a number: -.5 for the position which means it should be added at an absolute time of -.5 seconds. However, its a little odd (but not impossible) to place a tween at a negative time.

 

The second example uses a string: "-=0.5" for the position which means it should be added at a time relative to the end of the timeline. In this case it means 0.5 seconds before the end of the timeline. 

 

see this demo

 

var tl = new TimelineLite()

tl.to("#redBox", 3, {x:550})
  .to("#blueBox", 1, {x:550}, "-=0.5")// 0.5 seconds before timeline ends

 

http://codepen.io/GreenSock/pen/YXYmKG?editors=001

 

try changing the position to -.5 and you should see that the tween on the blue box starts at a negative time, which means it is half done when the timeline starts.

 

This article on the position parameter is a good overview of how the behavior changes (relative vs absolute) depending on the type of value used

http://greensock.com/position-parameter

[dada78]

Thanks Carl,

maybe I am not explaining this correctly, let me try again:

So what I wanted to accomplish is start the #element2 animation -0.5s into the previous tween. The previous tween is 7 seconds long, so I was hoping to just position the second tween 0.5 seconds into the previous tween.

 

After changing :

var tl = new TimelineMax()

to

var tl = new TimelineLite() 

it works as intended. So I was wondering if I am confusing plug-ins here..?

Thanks!

[Carl]

hmm, I'd be curious to TimlineMax behaving differently from TimelineLite.  I can't seem to reproduce it

 

var tl = new TimelineMax()
//var tl = new TimelineLite();


tl.to("#redBox", 3, {x:550})
  .to("#blueBox", 1, {x:550}, 0.5)// start at 0.5 seconds

http://codepen.io/GreenSock/pen/MwQWKr?editors=001

 

 

And incase you aren't dealing with the first and second tween in a timeline you can add a label where both tweens should start but offset the insertion of the second tweens by 0.5 seconds ahead of the label like so

 

tl.from(".demo", 2, {opacity:0})


.add("myLabel")
  .to("#redBox", 3, {x:550})
  .to("#blueBox", 1, {x:550}, "myLabel+=0.5")// start 0.5 seconds after myLabel

http://codepen.io/GreenSock/pen/bdLGpB?editors=001

 

let me know if that clears things up.