I had a quick glance but didn’t inspect the specifics of how its actually being done. The way I’d think about doing it is;
- CSS for base styling (get the main nav position and look sorted first). Additional nav element fade/size animations to also be done with CSS and defined against an additional class that can be added/triggered at a given scroll position (look into basic transitions using
opacityand transforms with
scale, and/or more advanced keyframe animations).
JS for watching scroll positions of each section in the viewport. When a new section reaches the desired level, trigger fade/size animation on the associated nav element.
Here’s an example using a similar logic, although not to animate a nav bar, but to trigger changes on surrounding page elements and background colours http://fofwebdesign.co.uk/template/_testing/scroll-in-view/add-class-to-target-when-trigger-in-view-reduced.htm
- Notes/explanation at the bottom.
- Article linked at the top.
- Script in the source code.
1. Watch a “trigger” element as the page scrolls.
2. When the “trigger” element appears in the bottom of the viewport, add a class to a “target” element (trigger and target can be the same thing, or different).
3. The newly added class triggers a CSS animation.