Framer Update: New Effects
Framer's new effects bring hover states, drag interactions, and looping animations to your designs with just a few clicks. In this demo, Benjamin shows how to combine these effects to create complex interactions that feel alive, all without touching code. This release extends Framer's scroll and appear effects with four powerful additions: Hover, Press, Loop, and Drag. You'll see how to create bouncy hover animations, spring-loaded press states, infinite loops with custom timing, and draggable elements with real physics. The redesigned effects panel lets you customize properties like scale, rotation, 3D transforms, fills, and shadows in real time. Benjamin walks through practical examples, from simple hover cards to complex combinations where a single element scales on hover, shrinks on press, rotates infinitely, and can be dragged within defined boundaries. Each effect is fully customizable with spring curves, delays, and transition options. Plus, Framer automatically handles cursor states for draggable elements. Try the effects playground yourself: https://fx-playground.framer.wiki/ 0:00 Introduction to new effects 0:35 Hover effect basics 1:52 Drag effect and physics 3:15 Loop effect with sliders 5:35 Press effect setup 6:15 Combining all four effects 7:45 Final demo and wrap up Topics covered: hover effects, drag interactions, loop animations 🌞 Start for free: https://framer.link/yt 📚 Learn more at: https://framer.link/yt-academy 💎 Join the Community: https://framer.link/yt-community 🎉 Follow on X: https://framer.link/yt-x
Download
0 formatsNo download links available.