Repeating animation Play on Mouse Hover - stop on Mouse Hover Leave

[Jojoba007]

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

[Carl]

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

[Jojoba007]

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

[Carl]

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

[Jojoba007]

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.

[Cassie]

Here's the download page ✨

https://greensock.com/docs/v3/Installation

[Jojoba007]

What a helpfull community, thanks!

[Jojoba007]

@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
 

 

[Carl]

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 👍

[Jojoba007]

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.

[Jojoba007]

@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

 

[Carl]

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.

[GreenSock]

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

[Carl]

@GreenSock thanks for the explanation. it makes sense. the ASCII art was quite helpful. Nice touch with the colors too!

 

 

[Jojoba007]

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

[mikel]

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

 

[Jojoba007]

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

[mikel]

Hey @Jojoba007,

 

This could be a possibility.

 

See the Pen xxPLRLo??editors=1010 by mikeK (@mikeK) on CodePen

 

Happy leaving ...

Mikel

 

 

[Jojoba007]

@mikel Yess, got it working for my situation. Thank you so much for the example to help me understand.