Streaming live at 10am (PST)

Two Animations While Scrolling

Hi,

Is it possible to run two animations at the same time while scrolling?

What I’m trying to do:
While scrolling, reveal progress bar that grows from left to right + Reveal section titles on top of the progress bar when the section is reached.
The progress bar will be black and while scrolling white text is revealed on top of the progress bar.

When I nest the text div underneath the progress div the text is also growing from left to right.

My workaround idea was to make the text it’s own div, put it above the progress bar, set the position to sticky, and move it over the progress bar div.
I made another animation for this div so while scrolling I set different opacity levels to create a reveal at certain sections.

However, now the animation for the progress bar automatically changes to the text animation and vice versa if I try to change it back to the progress bar animation.

Is it possible to run two different animations at the same time while scrolling?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)