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 → https://webflow.com/website/Cloneable-rack-focus-interaction-in-Webflow

Learn more about interactions on the web in our interactions and animations course → https://university.webflow.com/courses/interactions-and-animations-course

----------
Get started with Webflow: https://wfl.io/2r7cVUW
Join the Webflow Community: https://webflow.com/community

https://webflow.com
https://twitter.com/webflow
https://facebook.com/webflow

web designwebflowresponsive web design