Animations

Framer Update: Component Effects

Benjamin

8:06

22K views

Nov 16, 2023

About this lesson

This release brings Effects to Components. We support everything from Appear, Hover, Press, Drag, and Loop to Scroll Animations, Scroll Transforms, and Scroll Speed. This unlocks tons of new interactions, and it makes Effects reusable. For example, you can animate your navigation on scroll by adding a single Scroll Animation within your component. Create components with incredible fidelity. This has been one of our most requested features, and we’re excited to see what you’ll create.

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

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

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

0:01[Music]0:13a yo my name is Benjamin and in this 0:17release we're introducing effects in 0:22components and I'll show you how they 0:24work here I have a navigation bar and I 0:29want it to animate upwards when I scroll 0:32down and vice versa we now have access 0:35to all effects directly from within a 0:39component this unlocks tons of new use 0:43cases and it also enables you to make 0:45your effects 0:47reusable so I can go ahead and add a 0:50scroll animation I'll set the trigger to 0:53on scroll and here we can simply Define 0:57our scroll effect I'll I'll set y to -1:0164 1:03pixels and I'll change the spring curve 1:06to be a bit less bouncy as we don't want 1:09it to pop back into view during the 1:12animation this one looks good so let's 1:14go back to the homeage and give this a 1:21preview as you can see when we scroll 1:24down now the navigation bar animates out 1:27of view and because we were able to 1:30Define this within a component it works 1:34for all of our Pages out of the box any 1:38page that uses our navigation component 1:41will now have this scroll animation 1:43effect so this makes all your effects 1:47completely 1:48reusable so that was our navigation 1:52let's move on to the header asset here 1:55let's look at appear effects and scroll 1:58transforms I would like to design a sort 2:01of gradual buildup of this UI so let's 2:05start with the 2:06canvas with it selected I'll head over 2:09to the effects panel and let's add a new 2:13appear effect by supporting effects you 2:16can now also work with properties like 2:19scill and 3D rotation in your components 2:23for the canvas I mostly want opacity 2:26though so I'll go ahead and customize 2:29the 2:30transition let's use a time of about 1 2:35and we can even preview these effects 2:37right from within the 2:39component this looks okay for now so 2:42let's move on to the other 2:45elements I'll select the left hand panel 2:48and I'll also add a new appear effect 2:51here I'll give this an offset X of minus 2:55260 which is the width of the panel as I 2:58would like this one to slide in from the 3:00left I'll tweak the spring curve a 3:03little bit add a small delay to it which 3:05will tweak in the future and I'll go 3:09ahead and copy this effect and paste it 3:11onto the right panel here and here we'll 3:14use a positive x value of 260 and I'll 3:18increment the delay value a little bit 3:20as well next let's grab the toolbar here 3:24and make it slide in from the top to do 3:27this we'll use a y offset of minus 3:3060 and will make the spring a bit less 3:33bouncy too so those are all the main UI 3:38elements let's give this a preview so 3:41you can kind of see what I'm going for 3:43here but it doesn't feel right just yet 3:46and this is just a matter of going back 3:49and tweaking the transition values and 3:52the timing of each effect I'll give this 3:54one round of tweaks and then another 3:57preview and this is closer but I would 4:00also like to explore some staggered 4:02animations for the individual UI 4:05elements and since I'll be using all of 4:08these same Concepts that I showed you 4:10earlier in this video I'll speed through 4:13this 4:14section and again the real magic here is 4:17that we'll be able to get this right for 4:20this section and then we'll be able to 4:22use this section anywhere on any page we 4:25would like and it will get all of the 4:28same effects 4:31[Music]4:36and we're back as you can see we now 4:39have a pretty cool gradual buildup of 4:42the framer interface here all using 4:46simple appear effects contained within a 4:49single 4:50component finally let's use scroll 4:53transforms to add a little fake 4:55scrolling interaction to the site on the 4:58canvas here I'll first select this 5:01parent stack and I'll add a scroll 5:05transform but we would like to control 5:07the start and end of this 5:10transform and to do that we'll need to 5:12use section in view if I go back to the 5:16homepage you can see that this stack 5:19right 5:20here is also a scroll section with the 5:25name 5:27hero so let me go back back into the 5:30component select the images 5:33stack set the viewport to Center and 5:37then here we can now Define a variable 5:40for the scroll 5:42section I'll just rename this to scroll 5:46and we can later assign any section on 5:49any page we would like to this scroll 5:53transform I'll set opacity and scale 5:55back to one in the from effect and in 5:59the two effect I'll find a nice y offset 6:03to move the final image into the middle 6:07of the canvas I'll also add a transition 6:10to our 6:11transform this will make the transform 6:14also appear smoothly when you scroll 6:16with a mouse and not just on a trackpad 6:19and now on the 6:22homepage we can assign a section to the 6:26scroll variable and if we then give this 6:29is a preview you can see that as we 6:32scroll from the start to the end of the 6:36section our images also get transformed 6:40and they appear as if they are scrolling 6:42so thanks to the new section variable 6:45we're able to use section in view 6:48triggers within 6:50components finally we can also add a 6:53little scroll transform to each 6:55individual image here I'll select layer 6:58in view as the trigger and let's set the 7:01from state to opacity zero and then the 7:05two state is already just fine with 7:08opacity and skill set to one and we can 7:11customize the transition as 7:13well and then we can just copy and paste 7:16that onto all of the 7:19images if we now give this a preview you 7:23can see that the images not only appear 7:26as if they are scrolling they also add 7:29animate into view as we scroll the 7:31entire page and all of this within a 7:35single component and that's pretty much 7:38it for this video we're super excited 7:41about this release and we can't wait to 7:44see how you'll use effects in components 7:47thank you so much for watching and 7:50please stay tuned for more updates 7:53coming 7:56[Music]7:58soon

TeachesComponent Effects

Also coversAppear Effect Components Scroll Animations Scroll Transform Stacks Stagger Transitions & Easing Variables

Watch on YouTube ↗

‹ Framer Update: Page Effects (View Transitions)

Relative Overlays: Collision Detection ›