Animations

Framer Update: New Effects

Benjamin

8:49

47K views

Feb 23, 2023

About this lesson

This release introduces brand new Effects: Hover, Press, Loop, and Drag. These make it incredibly easy to add high-fidelity interactions and animations to your site—all it takes is a few clicks. All animations are powered by Motion, so they’re very performant yet extremely customizable. All new Effects can be mixed and matched, meaning the possibilities are endless. To get started, check out our playground, which you’re free to remix. https://fx-playground.framer.wiki/

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

0:00yo my name is Benjamin and in this video 0:03I'm very excited to introduce all new 0:06effects in framer we're extending our 0:10family of scroll and appear effects with 0:13four new ones hover drag Loop and press 0:18and you can combine these to design all 0:21new interactions 0:22so let's jump into our demo project and 0:25have a look at what's new 0:28so in this playground project I have 0:31cards for each new effect that we can go 0:34over 0:35I'll start by selecting the a rectangle 0:38in the hover card 0:40I'll click on the effects panel 0:42and here you can find all new effects 0:46and I'll go ahead and select the hover 0:48one 0:50and this brings us into the redesigned 0:53effects panel 0:55we've simplified the UI allowing us to 0:58add more properties for you to customize 1:02as you can see here I can tweak 1:04properties like skill and rotation and 1:09you get a nice real-time preview on the 1:11canvas these are the properties that the 1:15layer will animate to on Hover you could 1:18also add a 3D rotation or an offset X 1:22and Y respectively and we have a few new 1:26properties like fill and Shadow that you 1:28could work with but for now we're 1:30keeping it to scale and rotate we can 1:33also customize the transition 1:36and let's go ahead and give that a 1:39preview 1:41I'll scroll down to the card and just 1:45like that we've added a hover 1:47interaction you can still use components 1:50with hover variants as well 1:52but with this release you're no longer 1:55forced to use components if all you're 1:57after is a simple hover effect 2:00let's move on to drag effects 2:03I'll select the badge and add a new drag 2:07effect here we have a unique set of 2:10properties that all relate to dragging 2:13I'll keep free form and Snapback to yes 2:15and I'll tweak the transition just a 2:18little bit and let's just go ahead and 2:20give this a preview 2:23and there we go we have a nice bouncy 2:27dragging interaction because the 2:29freeform property is set to yes we can 2:33drag the layer anywhere there are no 2:35dragging constraints and because we kept 2:38Snapback set to yes as well it means 2:41that on drag and the layer will animate 2:44back to its original position using the 2:48transition options we customized earlier 2:51now you might have noticed this already 2:53but with this release we added a little 2:56layer panel indicator highlighting any 2:59layer that has an effect applied 3:03next let's have a look at my favorite 3:06new effect the loop effect 3:09I'll select the first knob of our 3:12sliders here 3:13I'll add a loop effect Now by default 3:17this rotates something infinitely and so 3:20I'm gonna reset rotate to zero and 3:24instead I'll use the offset X property 3:27to move our layer all the way to the 3:29left if we zoom in a bit I'll do the 3:32same for the second knob I'll reset 3:37rotate and then I'll move the offset X 3:41to a positive value making sure it 3:43aligns to the right hand side 3:46I'll keep the rest of these settings as 3:49they are for now 3:51so we can preview this to get a better 3:53understanding of how Loop works 3:57so we see that the knobs now correctly 4:00animate to their respective positions 4:03but the looping is instant for a more 4:07natural feel we would like to set the 4:09type to mirror on both of these layers 4:13and if we jump back into the preview you 4:17can see that they now bounce back and 4:19forth 4:20now because they represent sliders we 4:23can use a different transition like a 4:27spring curve 4:31and I'll apply the same spring curve to 4:35the other layer as well 4:41and now we can jump back to the preview 4:43again so this is feeling a bit better 4:46but it's way too fast 4:49so there are two things we can do 4:52first we'll decrease the stiffness value 4:55of our Springs making it a bit smoother 4:58and if we give that a quick preview 5:01that's feeling a little bit better 5:03already 5:05and the second thing we can do is add a 5:08short delay between each Loop 5:11I'll add a delay of 0.5 seconds 5:15and there we go you can use the loop 5:19effect to add all sorts of playful 5:21animations to your website in just a few 5:25clicks 5:26next let's have a look at the Press 5:29effect I'll select the layer over here 5:31and I'll add a press effect it defaults 5:35to setting scale to 0.9 meaning it will 5:39work really nicely in combination with 5:41the hover effect out of the box I'll 5:44also set rotate to -90 and we can tweak 5:49the transition a little bit so as soon 5:51as I click or press down onto the layer 5:56it animates to our press effect and as 5:59soon as I release the click or on Mouse 6:03up it animates back to its original 6:06state finally let's have a look at how 6:09we can combine all four effects onto a 6:13single layer so here I'll add one of 6:16each effect 6:18for the loop one I'll go ahead and set 6:21the time to 2 seconds but I'll keep the 6:24default rotation for the drag effect 6:27I'll set freeform to no this allows me 6:31to define a section to serve as the drag 6:34constraints the apparent layer of the 6:37pinwheel is defined as a section called 6:40card and by referencing it in the drag 6:44effect we can make sure that the 6:46pinwheel cannot be dragged or tossed 6:48outside of the card with momentum set to 6:52yes our draggable layer will have some 6:54simulated physics it will take our 6:57dragging velocity into account meaning 6:59we can toss the layer around within our 7:02card if you drag or toss a layer outside 7:05of its constraints it will quickly 7:07animate back to its actual constraints 7:10with the transition property here you 7:13can customize that transition so this 7:16layer has all four effects applied wide 7:18it gets upskilled on Hover downskilled 7:21on press it infinitely rotates and it is 7:25draggable within our card let's have a 7:28look at the final result I'll scroll 7:30down to the final card and you can see 7:33it skills up on Hover it kills down on 7:37press it infinitely loops around and I 7:41can both drag and toss it around within 7:44our card I can throw it into any corner 7:47for example and it will nicely bounce 7:49off of the sides using the transition we 7:52defined earlier framer is also smart 7:55about which default cursors it assigns 7:58with layers that have effects for 8:00example if you have a draggable layer we 8:03give it a grab cursor on Hover and a 8:06grabbing cursor while you're dragging 8:08the layer these new effects make it so 8:11much easier to add High Fidelity 8:13animations and interactions to your 8:16websites in framer they they are very 8:18performant yet easy to add and customize 8:21and we're super excited to share them 8:23with you that's pretty much it for this 8:25video thank you so much for watching I 8:28hope you enjoyed it and stay tuned for 8:31more updates coming soon

TeachesHover & Press Drag Effect Loop Effect

Also coversAppear Effect Component Variants Components Custom Cursors Transitions & Easing

Watch on YouTube ↗

‹ Create an animating shimmer effect like the Linear app website without any code

Design and ship your dream site. Zero code, maximum speed. ›