How to? The navbar button that reveals past scrolling the hero button
hey! I would like to know how to achieve this: https://readwise.io/read
a button in the nav that when past the hero button, reveals.
basically to avoid the same button within the same view
any insight on how to achieve this would be helpful Thanks!
Readwise Reader
Readwise Reader: The first read-it-later app built for power readers.
Save everything to one place to overcome content overload, search instantly, and highlight like a pro.
6 Replies
Hey @Juan Sandia this can be done with a webflow interaction.
I used devtools to check out the button styles before and after the effect.
readwise is animating the following:
opacity from 0 to 1 (100%)
width from 0 to 90px
padding from 0 to 9px (vertical) and 16px (horizontal)
I would use an
on scroll into view interaction for when the second section (below hero) comes into view
The actual animation in this website is actually done by toggling show-all combo class on the parent nav bar element, which would work as well. The CSS transitions provide the animation effect. You'll need a little basic CSS knowledge to pull it off that way.This video goes over different ways to accomplish the same animation: https://youtu.be/5vQ23CIO6hQ?si=9rCeocX7G3Z13nJn
Web Bae
YouTube
1 Animation 4 Ways [Webflow, CSS x 2, GSAP]
😬 Oops I messed up the CSS Transitions example but fixed it like so:
https://ibb.co/xjJFcx8
https://ibb.co/ZYcRqY1
👯♀️ Clone it: https://webflow.com/made-in-webflow/website/1-animation-4-ways
🆒 Demo it: https://1-animation-4-ways.webflow.io/
🐥 Follow Me! https://twitter.com/WebIsBae
🌶 FREE: My ULTIMATE Webflow Resource Library: https://code...
Thank you so much!