Jump to content
GreenSock

willdzoan31

Scrolling remove and add class name to a pin element

Recommended Posts

I've setup my codesandbox like this: https://codesandbox.io/s/adoring-panna-c6liiw?file=/src/styles.css:36977-36980

 

I want to add an animation that when you scroll down, it will pin the table to the center, and it will add/remove class to the left column accordingly to give a feel like you switching tab while scrolling.

 

So for my setup, I want it to add class "element-active" to the div with the class ".element-tab-title". Can anyone point me to the right direction? I'm literally don't have any ideas how to achieve this effect.

 

Note: The id for all the div on the left would be one, two, three, four, five. These are the elements that I want to add/remove class "element-active"

Link to comment
Share on other sites

Hey there!

 

From the scrollTrigger docs

 

toggleClass String | Object - Adds/removes a class to an element (or multiple elements) when the ScrollTrigger toggles active/inactive. It can be either of the following:
  • String - The name of the class to add to the trigger element, like toggleClass: "active"
  • Object - To toggle a class for elements other than just the trigger, use the object syntax like toggleClass: {targets: ".my-selector", className: "active"}. The "targets" can be selector text, a direct reference to an element, or an Array of elements.
Note that toggleActions don't apply to toggleClass. To have toggle class names in a different way, use the callback functions (onEnter, onLeave, onLeaveBack, and onEnterBack).
Link to comment
Share on other sites

I would suggest using GSAP for animation though rather than toggling a class. 

There are lots of examples in the docs to learn from! Hope this helps.

Link to comment
Share on other sites

Hi @Cassie, thank you for getting back to me. I will dive deeper into the docs then

  • Like 1
Link to comment
Share on other sites

That's the attitude! If you try something and it doesn't work, pop back here!

 

  • Like 1
Link to comment
Share on other sites

Hey @Cassie, I've able to do what I want using onUpdate on the timeline (not the best way I know :(), but haven't figured out a way to progress the timeline when click on the element on the left. Seems like the func tl.progress(...) doesn't do anything for me.

  • Like 1
Link to comment
Share on other sites

Ok! That's ingenious but probably not really a workable solution.

So the snippet I pointed to earlier - toggleClass, does exactly what you're after.

 

You can pass the following property to scrollTrigger -


toggleClass: {targets: ".my-selector", className: "active"}


and it will add a class that you choose to the element you've specified.

Like so -

See the Pen wvyYJNO by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

Thank you so much for the demo. Last question, can I toggle multiple class at the same time? Like have another sections array and add the class to it?

 

Link to comment
Share on other sites

3 minutes ago, willdzoan31 said:

Last question, can I toggle multiple class at the same time? Like have another sections array and add the class to it?

Anything is possible with enough time and custom JavaScript logic but I don't really follow this sorry.

Link to comment
Share on other sites

 

So in my case, I have the div on the right (it's the content for each of the div on the left), it's all have style of display: none right now. Whenever I add the "active" class to the left, it will also add the "active" on the right (which will remove the display: none for that div) 

 

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