TimelineMax gets confused

[garyw]

I am using TimelineMax to make an img tag appear to hover up and down. It randomly moves the y of the image up and down relative to its current position, like this:

var DURATION = 2;
var tl = new TimelineMax({paused:true, repeat:-1, repeatDelay:1 + DURATION * Math.random()});

tl.to(this.car1, DURATION, { y: '+=7', force3D:true }).
to(this.car1, DURATION, { y: '-=7', force3D:true}, '+=' + (1 + DURATION * Math.random()) ).
to(this.car1, DURATION, { y: '-=7', force3D:true}, '+=' + (1 + DURATION * Math.random()) ).
to(this.car1, DURATION, { y: '+=7', force3D:true}, '+=' + (1 + DURATION * Math.random()) ).
invalidate().
play();

At various other times, my project explicitly moves the img to a new y position.  To do this, it kills the hover timeline, calls TweenMax.to(), then re-executes the above code to restart the hovering.

 

Most of the time, everything works great.  Sometimes, though, the hovering starts acting wonky.  The img jumps to a different position, rather than moving smoothly.  I think it's due to the relative tweens above getting confused.  I've tried killing all tweens before executing this code, and as you can see, I have also tried using invalidate().

 

My first question is what am I overlooking that could cause this timeline code to misbehave?

 

My second question is, should I replace the relative tweens with explicit y positions?  And if so, how do I determine the current y position of the img?

 

[Addendum]

I came up with a way to calculate the current y position:

var r = this.car1.getBoundingClientRect();
var currentY = Math.round(r.top);

var DURATION = 2;
var tl = new TimelineMax({paused:true, repeat:-1, repeatDelay:1 + DURATION * Math.random()});

tl.to(this.car1, DURATION, { y:currentY + 7, force3D:true }).
to(this.car1, DURATION, { y: currentY, force3D:true}, '+=' + (1 + DURATION * Math.random()) ).
to(this.car1, DURATION, { y: currentY - 7, force3D:true}, '+=' + (1 + DURATION * Math.random()) ).
to(this.car1, DURATION, { y: currentY, force3D:true}, '+=' + (1 + DURATION * Math.random()) ).
invalidate().
play();

Unfortunately, this doesn't solve the problem. The img seems to hover correctly through one cycle, then starts sporadically jumping to different positions.

[Jonathan]

Hello garyw, and Welcome to the GreenSock Forum!

 

Instead of using play() after invalidate() the Docs advice to use restart()

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/invalidate/

 

Below taken from the invalidate() TweenMax Docs:

 

Clears any initialization data (like starting/ending values in tweens) which can be useful if, for example, you want to restart a tween without reverting to any previously recorded starting values. When you invalidate() an animation, it will be re-initialized the next time it renders and its vars object will be re-parsed. The timing of the animation (duration, startTime, delay) will not be affected.

 

Another example would be if you have a TweenMax(mc, 1, {x:100, y:100}) that ran when mc.x and mc.y were initially at 0, but now mc.x and mc.y are 200 and you want them tween to 100 again, you could simply invalidate() the tween and restart() it. Without invalidating first, restarting it would cause the values jump back to 0 immediately (where they started when the tween originally began). When you invalidate a TimelineLite/TimelineMax, it automatically invalidates all of its children.

 

If that doesn't help.. can you please provide a limted codepen example so we can see your code in a live editable environment. This way we can better help you by seeing code we can test live.

 

Here is a nice video tut by GreenSock on How to create a codepen demo example!

 

Also just a quick note.. when using force3D you only have to add it to the first tween in your sequence, and GSAP will know to use force3D for the rest of your tweens.

 

Standby.. I will get clarification from the big cheese about invalidate() !

 

Thanks!

 

 

[Carl]

Yeah, like Jonathan said, we really need to see what is happening in an environment like CodePen.

Please be sure to make it clear how other code is explicitly changing the y and maybe give us a button to press to interrupt the timeline and reset it. 

 

As Jonathan described, using invalidate() should help in this situation, but we'll be able to better address what is happening once we can see it.

Also its hard to tell if you are re-creating the same timeline many times or not. 

 

Thanks