Jump to content
GreenSock

mikel

Control of two objects by hover

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

I try to control two objects by hover: 

 

But I can not find a way to "block" the non-active "line".

Plus, if hover change is too fast, the animation of SVGs will be disturbed.

 

Best regards from Hamburg

Manfred

See the Pen ZBqPdB by mikeK (@mikeK) on CodePen

Link to comment
Share on other sites

Hi mikel :)

 

I'm not quite sure of the desired outcome here. If one of the divs is animating and you hover over the other button what should happen to the piece that is currently animating? Should it continue? or reverse? or stop?

 

When asking about hovering too fast, I think you're probably looking for the isActive() method. You can use that to only play the animation if it's not already playing. More info here:

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/isActive/ 

 

If you can give a few more details about the desired behavior, I'm sure we can get you on the right path.

 

Thanks and happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

I just looked at your pen again and I think you'll want to use jQuery each() if you're going to have multiple buttons and animations like that. Here's a pen I made in answer to another forum question, but it works the same way as what I think you're trying to accomplish.

 

See the Pen ALbpPb by PointC (@PointC) on CodePen

 

Hopefully that helps a bit. 

:)

  • Like 2
Link to comment
Share on other sites

Hi Craig,

 

Thanks for Your support.

 

'jQuery each()' is a good alternative. And I coded the animation of the LINES as I did for the pages - instead of draw the SVG.

Its ok: 

See the Pen YpRKrq by mikeK (@mikeK) on CodePen

See the Pen YpRKrq by mikeK (@mikeK) on CodePen

 

Too fast hover changes are still destroying the animation of a line.

 

Best regards

Manfred

Link to comment
Share on other sites

Hi,

 

I got it - fast changes add up to tidy animations:  

See the Pen VmqwGM by mikeK (@mikeK) on CodePen

 

So: Never tween one object in different directions at the same time - or something like that ?!?

 

Even if its splitting hairs: Why does the line jerks a bit to the right at the end of animation (xPercent:0)?

 

Best regards

Manfred

Link to comment
Share on other sites

I can't notice any jerking at all. Do you have a video capture maybe? If so, please let us know what browser and OS you're on. 

Link to comment
Share on other sites

  • Solution

I didn't see that at first either. Thanks for the video - very helpful.

 

I think what's happening is the SVG and the path inside the SVG have the same ID and you're seeing something strange. I made a fork of your pen and dropped a line element into each SVG rather than the path and it all seems fine to me. In this case, the line (or path) inside the SVG doesn't even need an ID or class since you're animating the entire SVG via xPercent.

 

See the Pen woRRqb by PointC (@PointC) on CodePen

 

Hopefully that helps.

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Hi Craig,

 

Thanks - you cut the knot.

 

I haven't seen the wood for the trees - too much IDs and classes ...

 

Best regards

Manfred

  • Like 1
Link to comment
Share on other sites

Happy to help. I'm glad you got it all working now.

 

Happy tweening.

:)

  • Like 1
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.
×