Jojoba007 Posted November 5, 2021 Share Posted November 5, 2021 Hi, I'm new to Greenstock. I have an block inside a div that should play a repeating animation when the mouse is hovered over the main Div. It also should stop playing the animation (after the animation loop is finished) when on Mouse Hover Leave. I tried to find a solution on the forums, but for now only got it partly working. See my CodePen. Hope to get some tips. See the Pen GRvQYJb by jojoba007 (@jojoba007) on CodePen Link to comment Share on other sites More sharing options...
Carl Posted November 5, 2021 Share Posted November 5, 2021 Hi and welcome to the forums, Thanks for providing the demo. It looks like you forgot to include gsap, but that's ok. It also looks like you are using an old version of gsap as there is no longer a need for timelinemax. Be sure to check out the migration guide. the main issue with your setup was that you were creating new timelines on each interaction. I'd suggest creating the tween or timeline once and then just use the buttons to control it. See the Pen qBXxJvG?editors=0010 by snorkltv (@snorkltv) on CodePen If you need help getting started and migrating from old GSAP check out my free GSAP 3 beginner's course. https://www.creativecodingclub.com/courses/FreeGSAP3Express 2 Link to comment Share on other sites More sharing options...
Jojoba007 Posted November 5, 2021 Author Share Posted November 5, 2021 Wow, thanks for the quick respons. I now see my error. One thing that your example doesnt do is finish it's animation after hover leave. It abruptly stops the animation. Is it possible the animation finishes it cycle to it's original stance before stoping? And thanks for the link to the course Link to comment Share on other sites More sharing options...
Solution Carl Posted November 5, 2021 Solution Share Posted November 5, 2021 doh! sorry about that, totally missed that in the initial post. see how this works. I basically set the tween up to check to see if you are hovering or not to see if it should keep playing every time it gets back to its starting position. See the Pen bGrLQMM?editors=0010 by snorkltv (@snorkltv) on CodePen @GreenSock I found an odd behavior here. When the tween plays forward through the first iteration and then yoyo's back to the starting point the progress() of the tween is 0, yet calling play() doesn't advance the playhead forward. I had to call restart() to get the tween to advance. Note it's important that I have the play() in there too 1 Link to comment Share on other sites More sharing options...
Jojoba007 Posted November 5, 2021 Author Share Posted November 5, 2021 Awesome, thanks for the solution. This is exactly what I was looking for and I understand what you did there. The only issue is that I indeed think I have an older version of Gsap and ScrollTrigger installed. I use Gsap together with Soffly Oxygen Builder. I downloaded the zip from the Greensock website. Not sure how I got it anymore I think I need to re-upload the newer js files. 2 Link to comment Share on other sites More sharing options...
Cassie Posted November 6, 2021 Share Posted November 6, 2021 Here's the download page ✨https://greensock.com/docs/v3/Installation 1 Link to comment Share on other sites More sharing options...
Jojoba007 Posted November 6, 2021 Author Share Posted November 6, 2021 What a helpfull community, thanks! 2 Link to comment Share on other sites More sharing options...
Jojoba007 Posted November 8, 2021 Author Share Posted November 8, 2021 @Carl One more question regarding the code. Your example isn't working on my Wordpress installation with the latest Gsap installed. The only code that works for me is the one in the CodePen below. When I use your js code I get the following error: "Uncaught SyntaxError: Identifier "tween" has already been declared on line #1". But I have never declared it anywhere before. I use Wordpress Oxygen Builder and I use the code inside a Oxygen Builder Code Block. See screenshot with error: https://prnt.sc/1yqzysn This is the CodePen that is currently active, but does work on my installation: See the Pen VwzxPLJ by jojoba007 (@jojoba007) on CodePen Any idea why your code isn't working on my Wordpress install with Oxygen Builder? You say it seems i'm using an old Gsap version, but I installed the latest version 3.8.0 Link to comment Share on other sites More sharing options...
Carl Posted November 8, 2021 Share Posted November 8, 2021 Sorry, there's no way for me to know where the conflict is with your setup. Before you add this code you could console.log(tween) to see what it actually is. Also you could rename your tween variable to something else (animation, harold, whatever) and see if that resolves it. WIth the gsap version I was referring to the deprecated syntax you were using with TimelineMax (prior to version 3) Always good to use the latest version of gsap 👍 Link to comment Share on other sites More sharing options...
Jojoba007 Posted November 9, 2021 Author Share Posted November 9, 2021 Thanks @Carl for the information. I indeed tried to give the variable another name, but same issue. I'll look into it. I suspect it has to do with the build in java editor of Oxygen Builder. Link to comment Share on other sites More sharing options...
Jojoba007 Posted November 9, 2021 Author Share Posted November 9, 2021 @Carl One last question. I have multiple white blocks with the same class name. If I hover over them I dont want them to start all at once, but only the one that I hover over at that moment. I tried to use an array, but no result yet. See CodePen below. At the moment the white blocks all start at once. See the Pen ExvRNZW by jojoba007 (@jojoba007) on CodePen Link to comment Share on other sites More sharing options...
Carl Posted November 9, 2021 Share Posted November 9, 2021 I don't have time to build this out for you, but I cover loads of this stuff in my courses (see sig). Here's a demo from one of my lessons that shows that you can click each pill to open it. The basic idea is each "expander" has its own animation that can be played or reversed. You need to do the same thing with your setup inside a loop. See the Pen YzGpXWO?editors=0010 by snorkltv (@snorkltv) on CodePen Give it a try. If you have trouble I can maybe jump in later or tomorrow. 2 Link to comment Share on other sites More sharing options...
GreenSock Posted November 19, 2021 Share Posted November 19, 2021 On 11/5/2021 at 7:36 AM, Carl said: @GreenSock I found an odd behavior here. When the tween plays forward through the first iteration and then yoyo's back to the starting point the progress() of the tween is 0, yet calling play() doesn't advance the playhead forward. I had to call restart() to get the tween to advance. Sorry about the delayed response, @Carl! Totally missed this. Yep, that's not a bug. You've got repeat: 1, yoyo: true which will make the playhead go forward to the end (progress: 1) and then back to the start (progress: 0) so at the OVERALL end (totalProgress() === 1), the local progress() would be 0. It's a little mind-bending but trust me, it's logically how it should work: progress 0 1 0 |--------|--------| start repeat end totalProgress 0 0.5 1 |--------|--------| start repeat end So .progress() is 0 at both the start and the end of a yoyo'd animation whereas .totalProgress() will always be 1 at the very end. Summary: use totalProgress(), not progress() in your conditional logic One other note: I think you meant to listen for "mouseenter", not "mouseover". The problem with "mouseover" is that it'll fire EVERY time your mouse rolls over ANY of the child elements too, so you may get a bunch of those events. 😬 Link to comment Share on other sites More sharing options...
Carl Posted November 20, 2021 Share Posted November 20, 2021 @GreenSock thanks for the explanation. it makes sense. the ASCII art was quite helpful. Nice touch with the colors too! 1 Link to comment Share on other sites More sharing options...
Jojoba007 Posted February 12, 2022 Author Share Posted February 12, 2022 Hi All, Its been a while, but I still havent got it working ;-(. When I hover over the dark div, the smaller whiteblock inside should be starting an looping animation. Also, at the moment on Hover Out the animation reverses and stops, but what it should do is finish its animation and then stop. I'm new to Gsap and JavaScipt. See the Pen JjOJxEg by jojoba007 (@jojoba007) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted February 12, 2022 Share Posted February 12, 2022 Hey @Jojoba007, Here is an example with plain JS and new GSAP See the Pen oNowmmz?editors=1010 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 3 Link to comment Share on other sites More sharing options...
Jojoba007 Posted February 13, 2022 Author Share Posted February 13, 2022 @mikel Thanks for your reply, but I'm still not sure how to finish the animation in my example. At the moment when I hover out, the animation stops abrupt. What I'm looking for is when I hover out the animation of the inside element should finish its animation cycle. 1 Link to comment Share on other sites More sharing options...
mikel Posted February 13, 2022 Share Posted February 13, 2022 Hey @Jojoba007, This could be a possibility. See the Pen xxPLRLo??editors=1010 by mikeK (@mikeK) on CodePen Happy leaving ... Mikel 2 Link to comment Share on other sites More sharing options...
Jojoba007 Posted February 13, 2022 Author Share Posted February 13, 2022 @mikel Yess, got it working for my situation. Thank you so much for the example to help me understand. 2 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