Change component via scroll animation

Design help Animations & Interactions
1

Hi all - is there a way to use a scroll animation to change the variant of a component?

I have a navbar with several elements that should change when a particular element is scrolling into view. Basically merging from variant a to variant b.

One way I found to achieve this is with custom header code on the page.

Another could be to have two components on top of one another with and change their opacity on scroll.

Has someone done this before and can help me.

Thx

1 Like
2

If you’re using GSAP interactions it has a class adder action. You could add/remove the component variant’s class.

Use Chrome devtools to inspect your HTML to see what the emitted class name is.

1 Like