Stop other animations on mouseover/leave

[Robero]

Hi there,

 

I have a sample question, maybe more related to javascript than to GreenSock.

I have created a simple list with 4 items, and added a simple tween on mouseover of each element. If you try to mouse hover all the elements of the list, while the first one is animating, it will run all the animations in sequence.

I don't want that this happen, but i want that if the cursor is on the first item, and i move it to the latest, only on the last item the animation start (maybe if another animation is already started, it should stop/reverse).

 

Hope I explain well my problem, if not just tell me and i will try to explain it again

 

Thank you all!!

See the Pen mKOJEm by anon (@anon) on CodePen

[Shaun Gorneau]

Hi @Robero,

 

Sounds like you're looking for two things to happen

 

1. That any Tween started on mouseover will backout (reverse itself) immediately on mouseout
2. That mouseover should have intent detection; i.e. a short delay that allows someone to pass through the item without firing the mouseover handler

 

I've put together a CodePen illustrating how to make this happen

 

See the Pen JZbdvR by sgorneau (@sgorneau) on CodePen

 

[PointC]

I couldn't really tell if you wanted a delay on hover or not, but here's an additional approach creating a timeline for each <li> and play/reverse on hover.

 

See the Pen bKBdzO by PointC (@PointC) on CodePen

 

The way you had it in your demo, you were just adding tweens to the main timeline on each hover. That's why they played in sequence. Happy tweening.

 

[Shaun Gorneau]

Ah, yes @PointC! You bring up a point I forgot to highlight!! In the example, I removed the timelines and created individual tweens but I didn't explain that change! Thanks for pointing that out!

[Robero]

Hi @Shaun Gorneau, hi @PointC

 

Thank you for you're reply! Both solutions works perfectly and help me to better understand how to managed Timeline or Tween.

 

Thank you again,

Roberto :)