Animations, Scroll

Framer Update: Scroll Transforms

Benjamin

17:07

149K views

Dec 1, 2022

About this lesson

Introducing Scroll Transforms in Framer. Design expressive landing pages with complete control over the scroll position. Transform any style while scrolling, or select specific sections for fine-grained control. It’s magic. Only in Framer.

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

TeachesScroll Transform

Also coversComponents Frames Links Scroll Animations Sizing Stacks Transitions & Easing

Watch on YouTube ↗

‹ Framer Update: Quick Insert

Framer Update: Scroll Animations ›