Scrolling remove and add class name to a pin element

[willdzoan31]

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"

[Cassie]

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

[Cassie]

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.

[willdzoan31]

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

[Cassie]

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

 

[willdzoan31]

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.

[Cassie]

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.

[Cassie]

If you're not used to JS, here's one without a loop

See the Pen ExQdWzW?editors=1010 by GreenSock (@GreenSock) on CodePen.

[willdzoan31]

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?

 

[Cassie]

And as far as progressing... do you just want an anchor link?

See the Pen VwQEpJX?editors=1010 by GreenSock (@GreenSock) on CodePen.

[Cassie]

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.

[willdzoan31]

 

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) 

 

[willdzoan31]

Oh nvm, I got it. Thank you @Cassie, you're a hero!