Interrupting animation with another animation without affecting the overalltimeline

[charlitos]

Hi, this is my first post as I just started to play with Greensock and so far it has been really useful Im just having a hard time trying to figure out a couple of things.

 

Iets say I add an element to my timeline

 

var tl = new TimelineMax();

 

tl.to($("#element"), 8, {css:{left : 100}, onUpdate:detectSomethingChanged});

 

This element is positioned through CSS in a default location then it starts to move.

 

Now whats happening is that my callback function detects if the mouse is on top of my element, if so, it fades it away :

 

 

tl.to($("#element"), 2, {css:{opacity : 0}, overwrite:"all"});

 

and as soon the fading stops I want the animation to start all over again from 0 when I do restart but this only restarts the fading effect not the entire clip since I used overwrite:"all". How should I do this exactly?

[Carl]

Hi and welcome to the GreenSock forums.

 

Yes, when you overwrite a tween you literally kill it; it gets completely deleted. In your case you were deleting the motion tween from your timeline and thus the timeline ONLY contained the fade animation (after the overwrite:"all" tween was created).

 

You really don't need to be adding a tween to the timeline for the fade. What you can do is just create a TweenLite (not associated with the timeline) to handle the fade and restarting of the timeline.

 

 

var box = $(".box");

tl = new TimelineLite({});
//reset box opacity to 1 at the beginning
tl.set(box, {css:{opacity:1}});
tl.to(box, 8, {css:{left:400}});

box.mouseenter(function() {
//optional
//tl.pause();
TweenLite.to(box, 0.5, {css:{opacity:0}, onComplete:restart})
})

function restart(){
tl.restart();
}

 

Here is a fiddle: http://jsfiddle.net/...bassador/MFZSZ/

 

Does this help?