Jump to content
GreenSock

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

Using a timeline on multiple nav buttons

Go to solution Solved by Rodrigo,

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

I imagine this is a simple issue but I can't find anything on it :(

 

On my codepen how can I use the same timeline on all buttons?

See the Pen pcjzy by anon (@anon) on CodePen

Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums.

 

If I understand correctly you want to give that animation to each of the nav elements. In that case the best approach is loop through them, create a single tween/timeline for every element and store it in the DOM node. Then on the hover event play or reverse that element's particular animation, like this:

//loop through the buttons
$.each($(".navBtn"), function(i,e)
{
  //create a tween for this element
  var t = TweenLite.to(e, 0.3, {x:20, paused:true});
  
  //store the tween in the DOM node
  e.hoverAnimation = t;
  
  //create the event handler
  $(e).hover(
    function()
    {
      this.hoverAnimation.play();
    },
    function()
    {
      this.hoverAnimation.reverse();
    });
});

I forked your codepen so you can see it working:

 

See the Pen yLeIt?editors=011 by rhernando (@rhernando) on CodePen

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