Navigation indicator using scroll-driven animations?
Hi! Does anyone have an example of a scroll-driven animation to indicate an active element in a side navigation? I found this example from Bramus (https://scroll-driven-animations.style/demos/carousel-with-markers/css/#carousel_03), and it's very close to what I need, but I'm more looking for something like the attached image, where the indicator moves down as you scroll the page.
3 Replies
You could achieve this using the new CSS animation-timline.
Unfortunately this is not yet available on all browsers so you may well have to look for a JS solution.
This quick demo uses the
animation-timeline with --page-scroll to adjust the top position of the indicator bar.
However, as I say, it won't work on all browsers (eg not on Firefox).
https://codepen.io/cbolson/pen/OJeaYgZ
(note - I will probably continue to play around with this so if it isn't working when you look at it, it might just be me messing things up)That's exactly it, Chris! Big thanks!
Yeah, I know that the browser support isn't the best at the moment, but I still wanted to play around with a bit, learning from different examples. The minicourse from Bramus on YT is such a great start, but even for me who have 20+ years with CSS thought it was a lot to handle. ^^
Got it to work in Firefox too with no JS.
I added
scroll-timeline: --page-scroll vertical; to the container (the html tag in my demo).