}

Animate Your Header Into View Later in Webflow

Level:
Fortgeschritten 👍
Preview result
Icon für einen externen Link
Im Webflow Designer öffnen und klonen
Icon für einen externen Link
Open and clone in Webflow Designer
Icon für einen externen Link

In this tutorial, I'll show you how to not display your header or navigation until the user has scrolled to a specific area on your site.

The same procedure works with other elements no matter where on your website. I use the Webflow interaction tool to do this and fire an animation when a specific area in the viewport of the browser window is reached.

Chapter:

00:00 — Intro
00:29 — Create navigation interaction
03:48 — Problem when reloading the website
04:31 — Solving the problem
06:24 — Final score
07:35 — Webflow online course