Pro-Level Scrolling Effects Everyone Can Build in Framer
1.7万 次观看 · 2025-02-28
UI 设计
🎥 In this tutorial, I'll show you how to create an impressive sticky variant scrolling animation in Framer. Learn how to build dynamic sections that smoothly transform as users scroll down your website... Remember to Subscribe https://goo.gl/6vCw64
✨ Key topics covered:
• Creating and managing variants
• Setting up sticky containers with proper overflow
• Implementing scroll-triggered animations
• Fine-tuning animation timing and transitions
🔗 Try Framer for FREE: https://framer.1stcollab.com/imjesseshow_ig
Use code JESSESHOWALTER for special offer!
------------------------------------------------------------------------------------
🤝 //////////// Become a UI Designer in 30 Days:
http://30dayui.com
🏆 //////////// Join my free member's community to get access to perks:
https://designchamps.io/
------------------------------------------------------------------------------------
🎨 ////////// I Design in Figma
https://psxid.figma.com/ixbomhqzoiy0
🖥️ ////////// I Build websites in Framer
https://framer.link/jesse
🖥️ ////////// I Prototype Magic in ProtoPie
https://www.protopie.io/plans?ref=jesse
📅 ////////// I run my life with Notion
https://affiliate.notion.so/tokendsfahjf
🎵 ////////// Take your films to the next level with music from Musicbed. Sign up for a free account to listen for yourself: https://fm.pxf.io/c/1372011/1347628/16252
00:00 Introduction
00:17 Setup
01:15 Create your variants
01:45 Get the template
02:16 Sticky positioning
03:24 Making space
04:40 Sticky timing
05:00 Scroll Variant Animation
06:04 Scroll sections
07:20 Animating images and text
07:47 Adjustments
✨ Key topics covered:
• Creating and managing variants
• Setting up sticky containers with proper overflow
• Implementing scroll-triggered animations
• Fine-tuning animation timing and transitions
🔗 Try Framer for FREE: https://framer.1stcollab.com/imjesseshow_ig
Use code JESSESHOWALTER for special offer!
------------------------------------------------------------------------------------
🤝 //////////// Become a UI Designer in 30 Days:
http://30dayui.com
🏆 //////////// Join my free member's community to get access to perks:
https://designchamps.io/
------------------------------------------------------------------------------------
🎨 ////////// I Design in Figma
https://psxid.figma.com/ixbomhqzoiy0
🖥️ ////////// I Build websites in Framer
https://framer.link/jesse
🖥️ ////////// I Prototype Magic in ProtoPie
https://www.protopie.io/plans?ref=jesse
📅 ////////// I run my life with Notion
https://affiliate.notion.so/tokendsfahjf
🎵 ////////// Take your films to the next level with music from Musicbed. Sign up for a free account to listen for yourself: https://fm.pxf.io/c/1372011/1347628/16252
00:00 Introduction
00:17 Setup
01:15 Create your variants
01:45 Get the template
02:16 Sticky positioning
03:24 Making space
04:40 Sticky timing
05:00 Scroll Variant Animation
06:04 Scroll sections
07:20 Animating images and text
07:47 Adjustments