Website Design

Animate a custom rack focus interaction — Webflow tutorial [Video]

Animate a custom rack focus interaction — Webflow tutorial

Bring out your inner filmmaking skills and rack focus between focal planes using a scroll position interaction in Webflow. We’re going to create an interaction that shifts focus between the background (the studio), Grimur (the middleground), and his coffee (the foreground).

In this lesson:
00:00 – Introduction
01:06 – Set up the layout and structure
01:51 – Create a scroll-based trigger
02:08 – Animate the rack focus using the blur filter
04:25 – Try to watch “Raiders of the Lost Ark” on Paramount+
04:51 – Recap & Paramount+

Clone the project here →

Learn more about interactions on the web in our interactions and animations course →

Get started with Webflow:
Join the Webflow Community:

Watch/Read More
Website Design

Pure CSS Scroll snap - Vertical Scroll [Video]

Free Enrollment - 11+ Courses in bundle Enroll here - ----- Top animation videos watch these below -------------------- #1- #2- #3- #4- #5- #6- #7- #8- #9- Join our fb group -