Framer Update: Scroll Transforms

yo my name is Benjamin and in this video I'm very excited to cover scroll transforms a brand new framer feature this allows you to transform any layer while scrolling allowing you to design expressive landing pages with an incredible Fidelity and you can combine this with all the existing effects including the recently shipped scroll animations so let me jump into our demo file to show you how it works so this is our sample project in framer without any transforms applied so let's start with our badge this is a fixed layer meaning it's always in view bent to the bottom right corner and pointing to framer.com it also uses the arc component which is available on framer.supply and the arc has a subtle spinning animation applied I'll select the arc component over here in the layer panel and let's add our very first scroll transform which we can do by clicking here so this is the scroll transform UI we have three different triggers all of which we'll cover in this video and then we have a simple from State and a two-state and these work essentially the same way as a Fairfax do in framer and then we have this new transition property that I'll cover in a little bit as well if we open the from effect this is where we can design kind of the initial state so I'll start by setting opacity and skill to one each foreign and then we could customize the rotation property here as well but I want to start with rotate being zero and then jump to the to effect and this is where we can set it to something like 360 or 720. the on scroll trigger means that our transform will be applied from the top of the page all the way to the bottom of our web page so essentially whenever we're scrolling the page this will be rotating which is exactly what I'm after with the badge so here I'm scrolling with my mouse and here I'm scrolling using the trackpad you can see that in both cases the transform is correctly applied on top of our animation but using the trackpad gives us a much smoother result now this is true when scrolling any web page but there's something we can do about this in framer you see there is this magical property here called transition that allows us to add a spring curve on top of our transform so I can customize the spring curve properties here just like any other transition in framer I think this should do the trick so let me go back and give this another preview and let's again compare the difference between a mouse wheel scroll and a trackpad you can see I'm using the mouse here and this provides a much smoother result as the transforms themselves are animated and it's smoothly transitions back into the actual Arc animation and here I'm using the laptop trackpad and you can see that this is also incredibly smooth so we have this rotation animation on top of that we have a rotation transform on scroll and on top of that we say hey do that with a spring curve so when you really think about the level of fidelity we're able to achieve here without having to write code I think that's pretty crazy so let's also apply a transform to the app window in our header here and here I'll show you how to use layer in View the second trigger I'll again edit the from State here I'll set skill to 0.8 and then we can apply a subtle rotate x value as well and this effectively skews the window a bit which is quite nice as you can see in the canvas preview and we can keep tweaking these values to our liking maybe an even smaller scale and I want opacity all the way to zero our two state is looking good and then let's apply a transition as well now let's give this a preview as we scroll the page you can see that our window transforms into view and this is what layer in view does it starts our transformed as soon as the top of the layer hits the bottom of the viewport and it ends as soon as the entire layer is in view which is perfect for something like a header next I want to highlight that you can also Nest transforms within our app window I have this site preview and we can also apply a transform to this layer even though it's contained within another transform I'll again select layer in view as the trigger and as the initial from effect I'll set skill to 1.5 this means that our site preview will be scaling down from 1.5 to 1. this is looking good so let's apply a transition and then I'll hit command P to give this a preview and as I start scrolling down to the header we can see that the app window is scaling up as our little preview video here is scaling down you initially only really see the little conic gradients animate over here and then we keep scrolling to reveal that this is in fact a site preview in framer nice so we're almost done with our header there's one more little effect I would like to add which is we have this little Shimmer that you might have noticed on top of the window here and I would like to transform it from left to right so let's quickly do that I'll select the Shimmer layer and I'll apply a scroll transform so even though this layer is only visible within our header I'll keep using on scroll as the trigger in the from State I'll set offset X to -200 which is also the width of our Shimmer and in the two effect I'll set offset X to a very high value like 3000 so this is to show that you can get creative with how you use these effects we know that on scroll keeps happening as we scroll the entirety of our page but because we're using a very high value we're seeing a lot of movement on our Shimmer to make sure that this effect is visible I set opacity to 1. I'll Now set it back to something like 0.3 to make it a bit more subtle what's really cool about using on scroll in this way is that our Shimmer will keep transforming even as the app window and the site preview have already finished because they use layer in view it starts from somewhere around here and it goes all the way to the right and whenever it's visible it's always transforming either to the left or to the right lovely so that's it for our header let's move on to the next section and to the next trigger type which is called section in view if you've already played with scroll animations you might already be familiar with this trigger type there's a few transforms I would like to apply to this section but first let me select the section itself it's this layer and it's called intro and defined as a section over here which is the same feature you would use for scroll animations or for smooth scrolling links we have our gradient here then we have the UI layer over here and then we have a frame wrapped around our gradient over here let's start by transforming this layer I'll add a scroll transform and I'll use section in view this triggers when a section is in view instead of the layer itself and I can select the intro section and with the viewport control we can customize when exactly to trigger the transform if the section hits the bottom of the viewport the middle of the viewport or the top of the viewport so now it will start as soon as the top of our section Scrolls into view next let's start customizing our effects I want this layer to fade and move in from the left so I'll set offset X to about minus 300 and then I can set opacity to zero I'll also add a transition again and I'll do the same for this layer over here I'll set it to section in view point it to the intro section and then instead of setting offset X to a negative number I'll set it to a positive 300. so these layers will now fade and move in from opposite ends so let's give this a preview as I scroll down to the section you can see that both layers are correctly transformed and that the transform starts as soon as the top of our section comes into view and this is why we're using section in view as we scroll past this both of the layers start transforming so our trigger is a different layer we couldn't use layer in view here because these layers have such different starting positions and sizes that they would not be in sync so regardless of the size and position of a layer if we use section and view we can ensure that they start and end at the same time and yes we can also add Nester transforms here for this section I can select the gradient and apply a rotation transform on scroll just like we did for the badge I'll set opacity and skill to 1 in the from effect and rotate to 360 in the 2 effect and I'll apply a transition and then if we give this another preview we have a much cooler effect the layers settle into their final position as the section is fully in view and the conic gradient animates to 360 rotation on scroll let's move on to the next section in which I'll show you how you can combine transforms with some of our own components here I have a stack selected that is wrapped around our ticker I would normally set this to fill AKA 1fr in this case I want to use something like 2 or 3fr so make it a lot wider so that I can also apply some offsets so if I scroll down the page you can see that our ticker is animating itself infinitely just like our badge so let's add a transform with the ticker wrapper layer selected I'll add a new scroll transform and I'll keep the trigger set to on scroll as we don't need this transform to visibly end instead I want to create this effect where we push the ticker forwards or we pull it back a bit whenever we scroll past it so all I need to customize here is the offset X in the 2 effect and we can set it to something like minus a thousand and of course I'll apply a transition if I preview with command B and scroll to the section you can see that the effect is already working it's pushed to the left when we scroll down and it's pulled to the right when we scroll back up the effect might be a bit subtle so I can increase the offset X to something like minus 1500 I'll quickly jump back to the preview and you'll see that the transform is a bit more noticeable now the ticker is pushed and pulled a bit as we scroll past it all while it's also animating infinitely next let's move on to the final example in which we apply transforms to a video so let's take a quick look at the setup first here I have a layer that is defined as a section called stories and within it we have another section called video so let's start by adding an effect to the video layer itself and here I'll use section in View and I'll reference the parent section in this case the stories section and I'll set opacity and skill to 1 in the from effect and I'll scale it down in the 2 effect so it starts out being quite large and it scales down to a more thumbnail-like size as we scroll past the section so let's see what we have so far as we're scrolling past the story section the auto playing video skills down to a smaller size but it also creates extra distance between the video and our copy which we can correct by applying an additional offset y I already tried doing this initially but I accidentally used a positive value where we need to use a negative offset y to bring the video closer to the copy and that does the trick as a final touch here we can also apply a transform to the play icon in the middle I've already showed you you can Nest transforms earlier in the video and here I want to show you that you can also Nest transforms even when referencing sections so for the play icon I can reference the video section and let's just simply fade and scale it into view I'll apply a transition and then let's jump to the section in the preview so now the skill in transform of the play icon will start whenever the top of the video hits the bottom of the browser viewport and here we can customize the viewport control to make the play icon appear later I'll set it to Center and then I'll make the from State a bit more subtle by setting the initial scale to 0.8 instead of zero so now if I jump to the preview we can see that now the play icon transform will only start when the top of the video hits the middle of the viewport so it happens a bit later and using these features the viewport control sections nesting we can create these really intricate transforms and that's pretty much it for this video there is so much more that you can do with transforms in framer including inversion and sequencing so expect more examples to follow for now thank you so much for watching we really hope you enjoy using this feature and stay tuned for more updates coming soon thank you foreign

Channel: Framer

Views: 115,715

Keywords: #framer, web design, website, no code, tool

Id: LqmTX8-5bLo

Length: 17min 7sec (1027 seconds)

Published: Thu Dec 01 2022