New Video is online!
Twitter Icon

Create a Sticky on Scroll Animation in Webflow - Beginner Tutorial

In case you ever wondered how to create that sticky section with a scroll animation in Webflow - I have got you covered. 🤓
May 6, 2022

Create a Sticky on Scroll Animation

Today we are going to learn How To Create a Sticky on Scroll Animation using Webflow. You'll be learning about:

👉  Webflow Shortcuts
👉  Sticky Elements
👉  Scroll Animations in Webflow

Hint: To create a Sticky Element, you can't set the parent element to overflow hidden!
This was always a bit confusing for me, but that's why I tend to use more Divs to help out.

Prepare the Sticky Section

We are going to build a 2-column section in order to have on column scrolling while the other column stays sticky.
This is of great use if you want to emphasize, give an overview or maybe show an image while the user can scroll through text.

If you haven’t yet, make sure to subscribe to my newsletter and receive quality content directly in your inbox. Also, you’ll receive 10 cloneables for Webflow you can copy and paste into your next project!

⏲️  Timestamps
00:00 - Intro
00:22 - Overview
00:48 - Page Structure Setup
10:27 - Build the Scroll Animation
17:39 - Result


Let all the good stuff come to you

Sign up and receive my top 10 clonables for Webflow for free! You’ll also receive High quality content educating you about how to create stunning Webflow projects!