Jump to content
Search Community

Hover concept I don't quite understand

modulareverything test
Moderator Tag

Recommended Posts

Hey,

 

I'm just struggling to get my head around a concept on gsap which I'm sure I'm just looking at it the wrong way.

 

Sometimes I want to add hover effects to a button or menu item or whatever, and revert back to its original state when the mouse leaves.

 

For example, I have a blue button and I want it to be red when I hover and blue again when I'm not. Easy enough, but what if sometimes that same button has a green variant and I want to reuse the same code? I somehow need to tell gsap that it should fade back to green when I'm done, but because I have it hard coded as blue, it'll now fade back to blue.

 

It's a basic concept I'm sure. The example here is pretty basic too, but sometimes I might want to change the font size and revert back to the original, or change the padding or margin or even the position on the page. These things can be impacted by the viewport size.

 

Hope that makes sense

Link to comment
Share on other sites

Thanks for explaining that so well, @ZachSaucier! The bit about using relative values `+=` is invaluable.

 

One quick follow up question, how could I chain together a timeline with this? Let's say I wanted the button background to turn red, and then maybe an arrow `<span>` appears after the text or something.

 

button.tween = [
   tl.to(button, {backgroundColor: "red", paused: true});
   // can I chain them up like this in some kind of array?
   tl.to(...)
   tl.to(...)
]
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.
×
×
  • Create New...