Layout & Design
Framer Update: 3D Transforms
Framer Update: 3D Transforms
Framer Update: 3D Transforms
Benjamin
·
12:46
·
30K views
·
About this lesson
We’re incredibly excited to introduce 3D Transforms, our biggest creative leap forward yet. This update brings over 10 new properties, improved Effects, redesigned selection controls, and more. Place any layer in 3D space by editing properties like Rotation, Skew, Origin, Depth, and Perspective. For the first time on a freeform Canvas, all 3D layers remain selectable and editable, resulting in an unparalleled experience. These new features work seamlessly with Effects, Components, Cursors, and Overlays, letting you craft animations and interactions of the highest fidelity. We think you’ll love it. https://framer.link/3d-transforms
🌞 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
0:15[Music]0:28w0:31[Music]0:45yo my name is Benjamin and this is 3D0:49transforms in framer a huge leap forward0:54unlocking tons of new possibilities and0:58in this video I'd like to show you a few1:00so let's start with the1:04basics there's a brand new section1:07available in the property panel called1:10transforms here you'll find a collection1:13of new properties let's start by adding1:17rotation this has a new control allowing1:20you to pick between a 2d and a 3D1:24rotation let's set it to 3D and this1:27gives us access to X Y and Z rotation1:32and if I scrub along some of these1:35properties you'll see this will rotate1:38our selected layer in1:413D while rotated our layer still appears1:44quite flat to fix that we can add1:48perspective and I'll set it to a1:51thousand and this has a big impact on1:54the rendering of our layer what's1:57especially unique here is that our2:00entire selection UI is able to be2:03projected in 3D space as well this means2:07you can freely select edit resize and2:12rotate your layers even if they are2:15transformed whereas most tools keep the2:18bounding boxes 2D framer goes the extra2:22mile resulting in an editing experience2:25unlike any other on our layer I'll set2:29rotate X to Zero and rotate y to2:3445° next we can add an effect to animate2:38our cover I'll add a loop effect we2:41brought our new 3D properties to all2:45effects as well I want our cover to spin2:49infinitely starting from our 3D position2:52so I'll set rotate y to 360 we've also2:56updated our Effect edit mode to to3:00accurately represent any layer that's3:02skewed in 3D space meaning you now get a3:06more accurate representation of every3:09single effect in framer I'll set the3:13time of this effect to 4 seconds and3:16then let's go ahead and give this a3:19preview our cover now rotates seamlessly3:23starting from a 3D position next I'd3:27love to show you the new origin property3:30let's bring over the effect and the3:33transform to our second cover to do so3:37I'll simply copy both and paste them3:40onto the second layer and maybe we'll3:43invert the starting position by setting3:46rotate y to3:49-45° next I'll click on transforms to3:53add the origin Property this allows us3:57to change the origin of our transforms4:01I'll set the x to 0% and then let's give4:04this a4:07preview our second cover now rotates4:10around its left hand side here instead4:14of the4:16center so using origin gives you4:19tremendous control over your animations4:22it even impacts the editing experience4:26on the canvas if I set the origin y to Z4:30as well and then I were to rotate this4:34layer on the canvas notice how it now4:37rotates around the top left Point4:39instead of the center and those are the4:43basics of 3D transforms in framer next4:47let's look at animation in more detail4:51by recreating a card flip animation I'll4:55first give this a preview to show you4:58what we're about to make5:00we're going for this card flip effect5:03that seamlessly switches between two5:05different images is rotating in 3D space5:10and is draggable by using layered5:12effects we'll start with these two5:16images this will be the front side and5:20this will be the back side to visualize5:23how this effect is achieved I'll start5:27by adding a loop effect to both of these5:31cards individually we know how this5:34works by now I'll add a loop5:37effect set the time to something like 35:41seconds and I'll set rotate y to5:48360 then I'll copy this effect and I'll5:51paste it onto the second cover here as5:56well and if we give this a preview6:00both are animating but they are6:03appearing quite6:04flat and that's because they are missing6:07a perspective6:10property so I'll add the perspective6:13property to both6:17layers and there we go so as you can see6:21now the back faces or the back sides of6:26these images are still visible as they6:29rotate and there's a property that6:31controls this behavior for us and it's6:35called the back Face Property I'll add6:38this property to the second cover and6:41I'll set it to Hidden and if we go back6:44to the preview notice how as it rotates6:48Beyond6:49180° the entirety of the backside is6:53hidden and this is how we can switch6:56between these two images I can do the6:59same to the first7:02cover but then they'll be hidden at the7:05same time and we need them to hide7:08interchangeably to fix that we can go to7:12the second cover and set rotate y to 1807:17so its looping effect will start from7:20here and you'll see it now hides on the7:23canvas and this is because it starts out7:26showing you the back face and we've set7:29the the back pH to Hidden now back in7:32the preview one more time we see that7:35the cards now hide interchangeably only7:39showing one side at a time now I'm sure7:42you can guess what's coming next we can7:45stack these cards on top of each other7:47by centering them to create our card7:50flip effect and now we're getting the7:53effect that we're after and we have a7:56better understanding of the back phas7:58property but using two separate effects8:02isn't ideal when we could group these8:06cards and use a single effect to do this8:10I'll select both of our covers and I'll8:13hit command enter to wrap them in a8:17frame let's name this8:20flip then I'll grab the loop effect from8:24the front and I'll remove it and I'll8:27also remove it from the back8:30and I'll instead paste it onto the flip8:34layer and set overflow to visible now we8:38have a single layer that influences our8:42rotation but our effect is no longer8:45working this is where I'd like to8:47introduce The Preserve 3D property by8:51adding this we'll let the browser know8:53we want the nested layers to exist in8:56the same 3D space as this layer and then8:59we can also add perspective here instead9:03and maybe I'll set the time to be a bit9:06slower so 4 seconds so we can see the9:10effect properly and just like that we've9:14now greatly simplified our card flip9:17setup using only a single looping effect9:21ensuring they can never get out of sync9:24as a final touch we can add an9:27additional dragging effect on top top9:30just to show you how you can mix and9:32match different effects I'll add another9:36frame around our flip frame and I'll9:39call it drag here I'll set overflow to9:42visible and I'll simply add a drag9:45effect using all the default settings9:49and there we go we've added a dragging9:52effect on top of our existing 3D9:55animation and that's it for part two9:58mixing animations with 3D transforms now10:03onto the final part10:07interactions we've ensured that 3D10:10transforms in framer are compatible with10:13all existing interactive tools and10:16components and I'd like to show you10:19three examples the first example being10:223D transforms are completely compatible10:26with our recently announced custom10:29cursor feature you can even switch10:32cursor variants without interrupting10:35your 3D10:39animation this second example10:41illustrates that these new properties10:45are also compatible with our existing10:48interactive and creative components in10:51this demo I've applied a 3D rotation to10:54the slideshow component I get an10:57accurate representation on the11:00canvas and when I give it a preview you11:03can see that everything keeps working as11:06expected no extra setup11:10[Music]11:12required and for the final and third11:15example these new features are extremely11:18useful for11:20projection that is projecting assets11:24videos or entire interactive experiences11:28onto 3D devices or 3D planes this allows11:34you to show off your product in new11:36creative ways with Incredible11:40Fidelity here I've simplified the demo11:43side for custom cursors and am11:45projecting it onto this iPad render all11:49animations and interactions keep working11:52and are rendered in 3D space and that's11:56it for part three and this video framer12:00is the first tool to offer a real 3D12:03transform editing experience on a free12:07form canvas and I found that this12:09encourages playful exploration and12:12invites happy accidents to your creative12:14work combined direct manipulation12:18animation and interactive tools lead you12:21to new ideas you wouldn't come across in12:24any other environment and that that is12:28the magic a12:32[Music]12:44framer
More in this topic
4:198 Framer shortcuts you're probably sleeping on
Layout & Design3K views · 2 months ago
2:16Framer Update: Stack Sorting and Bento Grids
Framer Update7K views · 2 months ago
3:41Sharing Vector Sets Across Projects (Vectors Lesson 7)
Layout & Design1K views · 3 months ago
3:38Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)
Layout & Design2K views · 3 months ago
4:25Animating Vectors in Framer (Vectors Lesson 5)
Layout & Design4K views · 3 months ago
4:59Customizing Vectors with Variables in Framer (Vectors Lesson 4)
Layout & Design3K views · 3 months ago
1:39Replace component instances site-wide in Framer
Layout & Design4K views · 4 months ago
6:58Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)
Layout & Design3K views · 4 months ago