MENU

Fun & Interesting

Framer Parallax Trick (Loop & Scroll Speed Tutorial)

Tim Gabe 13,901 1 year ago
Video Not Working? Fix It Now

In this Framer Tutorial you will learn how to create a parallax scroll effect using some underrated settings and techniques. ? Working File: https://timgabe.com/resources/sneaky-parallax-effect Timecodes 0:00 - Introduction 0:45 - Starting the creation of the frame in Framer. 1:15 - Positioning and sizing image frames. 1:51 - Discussing the removal of animations for initial setup. 2:30 - Adding and configuring the particles component. 3:14 - Customizing particle colors and settings. 4:03 - Locking layers and discussing layer management. 4:49 - Inserting and adjusting images within frames. 5:33 - Creating and applying a blur effect for a glass look. 6:26 - Finalizing the layout and discussing opacity settings. 7:05 - Adjusting image rotation and pinning for responsiveness. 8:02 - Organizing text fields into a stack for layout management. 9:01 - Preparing for animation: setting up the section frame. 10:03 - Demonstrating text fade-in as part of scroll animation. 11:00 - Applying scroll speed effects to images. 12:03 - Adjusting scroll speed settings for image animations. 13:06 - Adding loop effects for continuous image rotation. 14:18 - Setting up scroll-triggered animations for text. 15:50 - Copying and applying effects to multiple elements. 17:51 - Final adjustments and troubleshooting cut-off issues.

Comment