Jump to content
GreenSock

akal

Restart animation hover (mouveenter)

Go to solution Solved by mvaneijgen,

Recommended Posts

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

Link to comment
Share on other sites

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

  • Thanks 1
Link to comment
Share on other sites

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

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

 

Link to comment
Share on other sites

  • Solution

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

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

  • 5 weeks later...

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 ?

 

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

Link to comment
Share on other sites

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

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