Jump to content
Search Community

Interrupting animation with another animation without affecting the overalltimeline

charlitos 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

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?

Link to comment
Share on other sites

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?

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