akal Posted October 28, 2022 Share Posted October 28, 2022 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 More sharing options...
mvaneijgen Posted October 28, 2022 Share Posted October 28, 2022 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 1 Link to comment Share on other sites More sharing options...
akal Posted October 28, 2022 Author Share Posted October 28, 2022 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... Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted October 28, 2022 Solution Share Posted October 28, 2022 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". 2 1 Link to comment Share on other sites More sharing options...
akal Posted October 28, 2022 Author Share Posted October 28, 2022 Ohhh ok I think I get it (toggleActions) now, many many for your help ! 1 Link to comment Share on other sites More sharing options...
akal Posted November 27, 2022 Author Share Posted November 27, 2022 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 ? Link to comment Share on other sites More sharing options...
GreenSock Posted November 27, 2022 Share Posted November 27, 2022 I assume you meant something like this?: See the Pen dyKKQwm?editors=1010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
akal Posted November 28, 2022 Author Share Posted November 28, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now