Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Efficient Method for multiple mouseover/mouseout

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 everyone, I'm making some navigation buttons and I've been using GSAP to animate some mouseover and mouseout interactions. Currently, I have it set up so that there is a new GSAP timeline for each button for each mouseover and mouseout. I'm wondering if there is a way to consolidate my code or a more efficient way of writing this? For example, is there a way to make the target of each timeline (instead of using variables) like a 'this' type of thing, so that I only have to write two timelines (one for mouseover and one for mouseout) and it would work for both buttons? I'm very new to code and have been teaching myself, so apologies that I don't have all the jargon down just yet! 


Any advice is greatly appreciated, thanks! 

See the Pen QWWweRw by kbeats (@kbeats) on CodePen

Link to comment
Share on other sites

Hey kbeats, good question :) 


A few notes: 

  • When using timelines, you almost always want to initialize the timeline at the beginning and then manipulate/control (i.e. .play(), .pause(), .progress(), etc.) that timeline. If you create a new tween every hover event (like you're doing in your demo above) you're adding to the timeline each time, therefore not really using the timeline's functionality.
  • When you find yourself repeating code over and over again, that's usually a good time to make your code more abstract! Most of the time that means using functions more.
  • It looks like your _out animation is really just a reverse of your original animation. So we can make use of GSAP's .reverse() method.
  • Instead of adding everything to each button specifically, it's more efficient code wise to select both (all of) them at the start and then loop through each of them to prevent code duplication.
  • You can attach the timeline to the element itself to make accessing the timeline more easy in other parts of your code.

Altogether, I'd do it by using an approach like this one:


See the Pen PooqwQy?editors=0010 by GreenSock (@GreenSock) on CodePen


  • Like 2
Link to comment
Share on other sites

This is awesome, thank you so much! If you have the time, I'm wondering how the 'btn' argument in the function is working and how it is targeting the buttons when the variable set for them is navBtns? 

Link to comment
Share on other sites

5 minutes ago, kbeats said:

I'm wondering how the 'btn' argument in the function is working and how it is targeting the buttons when the variable set for them is navBtns?

You can read more about this in the .forEach docs. You can pass a function as a callback and it will pass in each element one by one (along with the index if you want it) to that function. So I named the element that it is passing "btn".

  • Like 2
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.