Categories
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 → 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

Watch/Read More
Categories
Website Design

Pure CSS Scroll snap - Vertical Scroll [Video]

Free Enrollment - 11+ Courses in bundle Enroll here - https://www.udemy.com/course/be-a-front-end-website-developer-today-10-projects-included/?couponCode=21C7E6DB65C76139891C ----- Top animation videos watch these below -------------------- #1- https://youtu.be/icrEhXdVcUw #2-https://youtu.be/i0YOfn2bn_8 #3-https://www.youtube.com/watch?v=Qco4kOjNDno #4-https://www.youtube.com/watch?v=cUe9FUAMH18 #5-https://www.youtube.com/watch?v=1dQJzKUwKCo #6-https://www.youtube.com/watch?v=cOLM2RrVX_4 #7-https://www.youtube.com/watch?v=TkiiGL_YMbA&t #8-https://www.youtube.com/watch?v=RJ0Gz3ApZ4M&t=43s #9-https://www.youtube.com/watch?v=p_gsUxCC_L0 Join our fb group - https://www.facebook.com/groups/328971707545530