Jump to content
GreenSock

shMattyP93

Firing a greensock animation when item has an active class

Recommended Posts

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
  });

 

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

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