Having a bit of trouble getting my head around these conflicting animations

[Vector]

I'm relatively new to GSAP, so excuse my lack of knowledge here.

 

I've have an animation that runs separate timelines depending on the hover state. It's works as intended on mouse in, but I'm having a bit of trouble with the mouse out animation, for the text. You'll see that it jumps to a set point within the timeline (I think) on mouse out.

 

On mouse out, I want each line of text to slide out in its current state. I can't simply reverse the mouse in animation for the text, because this is staggered. It's been a bit of trial and error for a while now, some of the other versions looked better, but still had issues.

 

Obviously I've looked through the docs on this website, to find a resolution, but I'm not sure what to look for. Maybe it's a slight functional change, or simply a method that I wasn't aware of.

 

N.B. I've slowed down the mouse out animation, and extended the delay, just so you can see my problem more clearly.

 

Edit: I've been working in Chrome, not done any browser testing yet.

See the Pen QEEpBa?editors=0010 by Luke87 (@Luke87) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for providing the nice demo.

 

In the case where you want your animate-out animation to be different than your animate-in animation it is better to just create those animations "on the fly" when you need them. When you consider that people will be moving their mouse over and off your artwork many times before it is done running it will be virtually impossible to play 1 animation forward and then try to get another existing animation to play in reverse and have it appear smooth (as there is no point in time where the in animation and out animation look the same).

 

So if you want to have the text stagger-in and then leave all at the same time (no stagger) I would suggest this:

 

$('.svg-container').hover(function() {
  tlLogo.play();
  TweenMax.staggerTo('#skill-text li', .25, {autoAlpha: 1, x: 80,delay: .35,ease: Sine.easeInOut}, 0.25)
}, function() {
  tlLogo.reverse();
  TweenMax.to('#skill-text li', 1, {autoAlpha: 0,x: 0,ease: Sine.easeInOut, overwrite:"all"}) 
});

http://codepen.io/GreenSock/pen/zBBZVQ?editors=0010

 

You can of course put delays on the text-out tween or build a timeline if you need a more elaborate sequence.

[Vector]

Thanks for the in depth explanation and very quick response! Not sure how long it would have took me to get to that stage, but it all seems to functions exactly as I had hoped. Was never aware of the overwrite property, good to know it exists.

 

Much appreciated, thanks again.

 

Edit: After looking at your pen a few more times, I can see what you mean now. What I was trying to do was contradictory.