Restart animation hover (mouveenter)

[akal]

Hello, first time asking here, hope I'll do it well ^^

On my pen, I successfully got a sliptText animation starting when mouseenter the black box.

But at first, I was expecting the sliptText animation starting when #creation enters in viewport  (using ScrollTrigger) which isn't the case here.

Any ideas ?

 

See the Pen KKepamO by akaaal (@akaaal) on CodePen

[mvaneijgen]

Hi @akal welcome to the forum!

 

What is it exactly what you want to happen? Have the animation play as soon as the box enters the view port AND have it animate when someone enters with their mouse? 

 

I have moved your code around a bit and this is what I got right now. I just created the timeline like you do, but I moved the ScrollTrigger logic to the whole timeline and not an individual tween. Second I've moved the tween logic outside of your function and set the animation to paused: true, then on mouse enter I restart the timeline (this way it always starts from he beginning). I've also enabled the ScrollTrigger markers to have a visual indication of what is happening.

 

Hope it helps and happy tweening! 

 

See the Pen vYrOmJK?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[akal]

Oh ok I see ! Yes this is exactly what I'm looking for, thank you

Last thing : when leaving viewport then entering again (like scroll down then scroll up) how can I get the text animation start again ? 

I thought it was related to toggleActions but changes have no effects...

 

[mvaneijgen]

Same thing as why I set .restart() on the tl on mouse enter instead of .play().

 

.play() will play the animation, but nothing will happen if the animation is already at its end position. Try setting your toggleAction to "restart pause resume reset" . Just play with all the values and check what feels right and see the docs for more info https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset"will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

 

[akal]

Ohhh ok I think I get it (toggleActions) now, many many for your help !

 

[akal]

Hello, I have now more than one block to animate into the same page, and because I can't use a unique ID for the trigger (previous eg ->  trigger: "#creation",) I need the animation starts each time entering viewport (without specifying a tag for the trigger) and each time the block is hover. Could you please help me to change the trigger parameter and implement a " for each " into the timeline ?

 

[GreenSock]

I assume you meant something like this?: 

See the Pen dyKKQwm?editors=1010 by GreenSock (@GreenSock) on CodePen

[akal]

This is perfect ! many thank for your time, the code you provide help me to understand new things (I'm learning JS...).

I succed to reproduce and adapt in an other case... thank you again ;D