Event, Animations, Plugins

Framer Event — Spring 2024, Introducing 3D Transforms, and a sneak peek at Plugins

18:37

14K views

Apr 10, 2024

About this lesson

Kicking off with the Spring Edition Framer Event on April 10th at 7PM CEST! Join us live for an overview of our latest features, thrilling product announcements, and community highlights.

Visit the Spring Event page at: https://framer.link/spring-24

🌞 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:00Today, we're going to unveil new features,0:02celebrate amazing things happening 0:05in and around the Framer community,0:07get a very special sneak peek 0:09into what's coming later this year.0:11And after all of that,0:12show you where to grab your exclusive 0:14Framer Spring Event stickers 0:16just for being here during the premiere.0:19But before we do any of that,0:21let's take a look back before we spring forward.0:25Framer lets professional designers 0:27build the best websites of their lives 0:30without code and without compromising on quality.0:33Framer sites are fast, responsive, SEO optimized,0:37and creating them feels as natural as designing in Figma.0:41Framer lets teams move faster,0:44frees up engineering resources 0:45to work on bigger and better things,0:48and completely eliminates the bottlenecks 0:50normally associated with creating,0:53updating, and publishing websites.0:55Now, 2023 was a big year for us and the Framer community.1:00We shipped 67 updates.1:03That's more than one meaningful product update per week.1:06People hit the publish button over 16 million times.1:09That's about one publish every two seconds.1:13Over 20,000 people joined the Framer community.1:16You can too, by the way, it's completely free.1:19More than 870 new Framer templates were released,1:22both free and premium,1:24which have created entirely new income streams 1:27for designers around the world 1:29who are creating templates through our partner program.1:33We also partnered with Contra 1:34to identify and certify Framer experts,1:37which led to over $1 million in client opportunities 1:41for those experts on Contra.1:43And individuals are creating amazing businesses,1:46products, and education around Framer,1:49like Framer Auth for building unlockable,1:52members-only content sites,1:54Magic Form for creating custom forms and fields 1:57without the heavy lifting,1:59Framer University for learning everything 2:01and anything Framer,2:03and Modules, custom code components and overrides 2:06for adding even more magic to your Framer site.2:11Recently, we launched the most comprehensive 2:13SaaS website template for Framer,2:15containing everything you'd need 2:17to launch a new site for your product,2:19and it's totally free to use and customize 2:22for whatever you're working on.2:24And earlier this year, we launched the Framer Gallery 2:27as a place to show off the very best sites 2:29built using Framer,2:31and to showcase our site of the month 2:33and site of the year award winners,2:35like our first place site of the year award winner,2:38Sebastian Martinez,2:40whose portfolio knocked our collective socks off.2:43Unique loading sequences,2:46scroll transforms and animations,2:49delightful interactions just because,2:52and of course, it's perfectly responsive.2:54Everything Sebastian did on this site 2:56uses standard Framer functionality,2:58which means you can do it too.3:00And with the updates we'll be sharing in a moment,3:02you'll be able to take things to an entirely new dimension.3:06But Framer's abilities go far beyond portfolios 3:09and landing pages.3:10Mali, one of Europe's largest payment platforms,3:13just moved their entire site over to Framer,3:16hundreds of pages.3:18They're taking advantage of not only our powerful CMS,3:21but also new localization features 3:23that we'll touch on a bit later.3:26All right, the time has come.3:28Are you ready?3:30Let's take a look at a brand new feature,3:32brush up on some things you might've missed,3:35and then catch a glimpse into the future.3:38Five four three two one.3:41Okay, we'll do that.3:46Here we go.3:47Let's take a look at finding the new feature 3:49and then catch up with our favorite players,3:51that is aенияC produit,3:53guys.3:54Obviously, I'm adding Dark Souls parents 3:55and, of course,3:56the player of choice to a 4:07Yo, my name is Benjamin 4:27and this is 3D Transforms in Framer.4:31A huge leap forward,4:33unlocking tons of new possibilities.4:37And in this video,4:38I'd like to show you a few.4:40So let's start with the basics.4:44There's a brand new section available 4:47in the property panel called Transforms.4:50Here, you'll find a collection of new properties.4:54Let's start by adding rotation.4:57This has a new control,4:59allowing you to pick between a 2D and a 3D rotation.5:04Let's set it to 3D 5:06and this gives us access to X, Y, and Z rotation.5:11And if I scrub along some of these properties,5:15you'll see this will rotate our selected layer in 3D.5:21While rotated, our layer still appears quite flat.5:25To fix that, we can add perspective 5:28and I'll set it to a thousand.5:31And this has a big impact on the rendering of our layer.5:36What's especially unique here 5:38is that our entire selection UI 5:41is able to be projected in 3D space as well.5:46This means you can freely select, edit, resize,5:51and rotate your layers, even if they are transformed.5:55Whereas most tools keep the bounding boxes 2D,5:59Framer goes the extra mile,6:02resulting in an editing experience unlike any other.6:07On our layer, I'll set rotate X to zero 6:11and rotate Y to 45 degrees.6:14Next, we can add an effect to animate our cover.6:18I'll add a loop effect.6:20We brought our new 3D properties to all effects as well.6:26I want our cover to spin infinitely 6:29starting from our 3D position.6:32So I'll set rotate Y to 360.6:35We've also updated our effect edit mode 6:39to accurately represent any layer that's skewed in 3D space,6:44meaning you now get a more accurate representation 6:48of every single effect in Framer.6:51I'll set the time of this effect to four seconds 6:55and then let's go ahead and give this a preview.6:59Our cover now rotates seamlessly 7:02starting from a 3D position.7:06Next, let's look at animation in more detail 7:11by recreating a card flip animation.7:15We'll start with these two images.7:18This will be the front side and this will be the backside.7:23I'll start by adding a loop effect 7:26to both of these cards individually.7:30We know how this works by now.7:32I'll add a loop effect,7:35set the time to something like three seconds 7:39and I'll set rotate Y to 360.7:47Then I'll copy this effect 7:49and I'll paste it onto the second cover here as well.7:54And if we give this a preview,7:57both are animating, but they are appearing quite flat 8:02and that's because they are missing a perspective property.8:08So I'll add the perspective property to both layers.8:15And there we go.8:17So as you can see now,8:19the back faces or the backsides of these images 8:24are still visible as they rotate.8:26And there's a property that controls this behavior for us 8:31and it's called the back face property.8:34I'll add this property to the second cover 8:38and I'll set it to hidden.8:40And if we go back to the preview,8:42notice how as it rotates beyond 180 degrees,8:47the entirety of the backside is hidden.8:51And this is how we can switch between these two images.8:55I can do the same to the first cover.9:00But then they'll be hidden at the same time 9:03and we need them to hide interchangeably.9:06To fix that, we can go to the second cover 9:10and set rotate Y to 180.9:14So it's looping effect will start from here 9:18and you'll see it now hides on the canvas.9:21And this is because it starts out showing you the back face 9:25and we've set the back face to hidden.9:28Now, back in the preview one more time,9:31we see that the cards now hide interchangeably,9:35only showing one side at a time.9:38Now, I'm sure you can guess what's coming next.9:41We can stack these cards on top of each other 9:44by centering them to create our card flip effect.9:49And now we're getting the effect that we're after.9:52And that's it for part two,9:54mixing animations with 3D transforms.9:58Now onto the final part, interactions.10:03We've ensured that 3D transforms in Framer 10:07are compatible with all existing interactive tools 10:12and components.10:13And I'd like to show you three examples.10:16The first example being 3D transforms 10:19are completely compatible 10:22with our recently announced custom cursor feature.10:26You can even switch cursor variants 10:29without interrupting your 3D animation.10:33This second example illustrates that these new properties 10:38are also compatible with our existing interactive 10:41and creative components.10:43In this demo, I've applied a 3D rotation 10:47to the slideshow component.10:49I get an accurate representation on the canvas.10:54And when I give it a preview,10:56you can see that everything keeps working as expected.11:00No extra setup required.11:05And for the final and third example,11:08these new features are extremely useful for projection.11:13That is projecting assets, videos,11:17or entire interactive experiences 11:20onto 3D devices or 3D planes.11:24This allows you to show off your product 11:27in new creative ways with incredible fidelity.11:32Here, I've simplified the demo site for custom cursors 11:36and am projecting it onto this iPad render.11:40All animations and interactions keep working 11:44and are rendered in 3D space.11:47And that's it for part three and this video.11:51Framer is the first tool 11:53to offer a real 3D transform editing experience 11:57on a freeform canvas.11:59And I found that this encourages playful exploration 12:03and invites happy accidents to your creative work.12:07Combined direct manipulation, animation,12:10and interactive tools lead you to new ideas 12:14you wouldn't come across in any other environment.12:18And that, that is the magic of Framer.12:23We can't wait to see what you do with transforms.12:31Sometimes it's the smallest details 12:33that have the biggest impact.12:35And custom cursors are no exception.12:38Now in Framer, you can swap out your cursor 12:41with any component of your choosing.12:43You can play it subtle.12:45You can use it to encourage action,12:47give a little preview,12:49go hard on your brain,12:50give a little preview,12:52go hard on your brand.12:54But really this feature is huge 12:55for not only adding moments of delight 12:57and individuality to your site,12:59but also improving usability 13:01and affordance for your visitors.13:03And it's super easy to do.13:05To set a page level cursor,13:07just select a page, go to the cursor property,13:10and select a custom component.13:13To automatically animate between cursor variants,13:16select something else on the page 13:19and change the cursor variant.13:22It's that simple, but it's crazy powerful.13:26All right, let's talk localization.13:29For companies operating globally,13:31localization is huge.13:33Earlier this year, we launched localization with AI,13:37which has made it simpler than ever 13:38to start translating pages and sites.13:41With our new localization 2.0 update,13:44you now have increased control 13:45over content visibility, URLs,13:48and the look and feel of the locale picker itself.13:51So if you're no longer offering a certain product 13:54in a certain place,13:55it's easy to customize what's visible for those visitors.13:59You can also set up localized URL slugs 14:02and automatic redirects for old URLs 14:04that might be floating around out there on the internet.14:08And as mentioned, you can now customize the design 14:11of the locale picker itself with components 14:14to go beyond the standard dropdown menu 14:16and match the look and feel of your site.14:20We know not everyone needs to localize their site,14:22but for those that do,14:24these updates are a huge quality of life improvement.14:27If you know, you know.14:32This one goes under the things you might've missed category 14:35that's super important.14:37One of our most popular feature requests historically 14:40has been component effects.14:42The ability to set an effect once inside a component 14:45or multiple effects and use it globally across your site.14:49If you're not taking advantage of this yet,14:51to show you just how useful it really is,14:54here's a quick practical demo.14:57Here I have a navigation bar 15:00and I want it to animate upwards 15:03when I scroll down and vice versa.15:05We now have access to all effects 15:09directly from within a component.15:11This unlocks tons of new use cases 15:15and it also enables you to make your effects reusable.15:19So I can go ahead and add a scroll animation.15:23I'll set the trigger to on scroll 15:26and here we can simply define our scroll effect.15:31I'll set Y to minus 64 pixels 15:36and I'll change the spring curve to be a bit less bouncy 15:40as we don't want it to pop back into view 15:42during the animation.15:44This one looks good.15:45So let's go back to the homepage and give this a preview.15:54As you can see, when we scroll down now,15:56the navigation bar animates out of view 16:00and because we were able to define this within a component,16:05it worked for all of our pages out of the box.16:11Over the past handful of months, we've shipped a lot.16:15So many helpful features and updates,16:17things like page effects,16:19giving you the ability to add page level animations 16:22on supported browsers with just a few clicks.16:27Our new creative insert menu,16:29letting you add extra delightful touches 16:31to your site instantly.16:34Relative overlays and collision detection,16:37making dropdowns super easy to build 16:39and ensuring that no matter what size screen 16:42your visitors are on, your content is always visible.16:46You can learn more about these and lots of other releases 16:49over on our spring event page at framer.com.16:52But don't go anywhere yet 16:54because now it's time for a sneak peek 16:57at what's coming next.17:29I'm not sure I see it.17:33Later this year, we'll be releasing Framer plugins,17:37a way for the Framer community to create, share,17:40and discover more ways to make Framer even better.17:43So to get on the list for early access 17:46or to start building plugins yourself,17:48head over to framer.com slash plugins.17:51At Framer, our goal is to make the web more creative.17:54We wanna give you access to tools 17:56that make the internet your canvas.18:00And based off what we've been seeing so far,18:02you're doing an incredible job.18:04So we'll keep shipping, you keep designing,18:06and we'll see you on the internet.

Watch on YouTube ↗

‹ Framer Update: 3D Transforms

Framer Update: Variables for Styles ›