Firing a greensock animation when item has an active class

[shMattyP93 4 Likes (Newbie)]

Basically I have a navigation with six items, and when clicked, they get an active class.

 

Is there a way that I can play a a timeline if that class is active, and then reverse that timeline when the active class gets removed?

 

This is the HTML for the navigation:

<nav>
  <div id="navigation">
    <ul id="navigation-ul">
      <li id="button-1" class="active"><button>1</button></li>
      <li id="button-2"><button>2</button></li>
      <li id="button-3"><button>3</button></li>
      <li id="button-4"><button>4</button></li>
      <li id="button-5"><button>5</button></li>
      <li id="button-6"><button>6</button></li>
    </ul>
    <div id="outline"></div>
  </div>
</nav>

 

This is the function to add the active class:

$('#navigation-ul').on('click', 'li', function() {
  $('#navigation-ul li.active').removeClass('active');
  $(this).addClass('active');
});

 

And finally, here is the gsap animation:
 

var navigationTwo = gsap.timeline({
    paused: true
  });
  navigationTwo.to("#button-2", {
    y: 14,
    delay: 0.5
  });

 

[OSUblake 18,453 Likes (Superhero)]

1 minute ago, shMattyP93 said:

Is there a way that I can play a a timeline if that class is active, and then reverse that timeline when the active class gets removed?

 

Play the timeline when you add the class. Reverse the timeline when you remove the class. You don't need to add an active class unless there is some css style changes.

[OSUblake 18,453 Likes (Superhero)]

Simple example. Box is an element, which is also an object. Which means you can add properties to it.

 

See the Pen 58ebf953209f72d03190c2db53d825b5 by osublake (@osublake) on CodePen

 

[shMattyP93 4 Likes (Newbie)]

2 hours ago, OSUblake said:

Simple example. Box is an element, which is also an object. Which means you can add properties to it.

 

 

 

 

This was super helpful and almost got exactly what I needed! But now all of my list items by default already already in the position set by the animation, y: 14, I need them all to start in their default spot. Thank you so much for your help

[OSUblake 18,453 Likes (Superhero)]

You can use .set() to put them in the correct spot. If you need the active to already be played, then set its animation .progress(1).

 

See the Pen 58ebf953209f72d03190c2db53d825b5 by osublake (@osublake) on CodePen

 

 

[shMattyP93 4 Likes (Newbie)]

13 hours ago, OSUblake said:

You can use .set() to put them in the correct spot. If you need the active to already be played, then set its animation .progress(1).

 

 

 

 

 

See the Pen XWmOprm by shMattyP93 (@shMattyP93) on CodePen

I must be missing something here as when the page loads the li's all move down

[ZachSaucier 7,118 Likes (Superhero)]

This is because you didn't pause the animation when you created it.

 

But your whole logic could be greatly simplified:

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

[shMattyP93 4 Likes (Newbie)]

8 hours ago, ZachSaucier said:

This is because you didn't pause the animation when you created it.

 

But your whole logic could be greatly simplified:

 

 

This is perfect, thank you so much!!!

 

I have one more question which may be a bit far fetched... I'm using the pagePiling.js plugin, is there a way that I can say if the page anchor = #page-two for the navigation to move to page two?

[ZachSaucier 7,118 Likes (Superhero)]

10 hours ago, shMattyP93 said:

I'm using the pagePiling.js plugin

I've never heard of that library.

 

10 hours ago, shMattyP93 said:

is there a way that I can say if the page anchor = #page-two for the navigation to move to page two?

What do you mean if the page anchor = #page-two? Do you mean if someone navigates directly to foo.bar#page-two you want it to move to that section?

 

If so, you'll need to parse the URL when the page loads and set things up accordingly. You'd have to look into pagePiling's documentation to see how to make it go to that position. 

 

You could also use GSAP to do the sort of thing that pagePiling does...