Streaming live at 10am (PST)

Scroll content animation


#1

I’m not sure if this is the correct category to post this in, but anyways, I would like to create a scroll animation that displays what category section the content is on while scrolling, just like this website has
Get started with Bitcoin
If you scroll down a bit, you can see that the script tells you exactly where you are and you can click on other categories to scroll up or down. How do you create something like this, and is there a plugin I can download that does a similar job?


#2

:ok_hand:

I’m very surprised your message passed the forum anti-spam with a link called “Get started with Bitcoin” :joy:

What you’re looking to replicate is pretty straight forward with Webflow. There are 2 distincts things in this behavior:

  1. a fixed vertical menu that’s highliting the section currently in focus: this is purely HTML/CSS, with all the needed properties supported by Webflow
  2. an animation that makes the menu slide in view at a desired point: this is taken care of by Interaction (either IX Legacy or IX2)

Outline for building a fixed vertical menu & highlight on focussed sections:

  • give each of your sections an ID in the Settings tab
  • use a Nav Menu element from the add menu. Use the Style panel to make it fixed, and take up all the height of the viewport… in other words design it like you want it to be when once shown.
  • Don’t forget to check those two options in the Settings tab when you have the Navbar selected:

  • style the Nav Links inside and link each of them to your sections in the Settings tab
  • pay attention: select one menu item, and scroll so that its target section is in focus (in view). You’ll notice an extra class called Current. Style this element like you want your highlighted element to be. From there, all links will take this style when their section is in focus.

Hide Show the menu:

This is a classic case of IX. In short, you’re going to set a default state for this menu, hidden to the right. Then decide for a trigger that will start an animation of the menu sliding into place. I don’t know how skilled you are with IX but anyway a little bit of learning can’t harm, so here’s where to begin:

But a quick outline:

  • make sure that when you move your menu to the right using Transform, it gets somehow hidden by the overflow of its parent element, or in other words it doesn’t increase the width of your page.
  • select in the page the element that will trigg the animation when scrolled into view, then go create a Element Trigger IX with When Scrolled Into View trigger.

  • Then Start an animation -> new animation
  • select the menubar
  • add a Move timed action, set the move to the right to hide the menu, in the properties activate Set as initial state
  • add another Move time action, set the move to zero, set the time, the easing mode all of that.

That’s pretty much it.

If you come back for more help don’t forget to share your read-only link so we can show you how to progress on your own site.