Animations

Framer Sites: 3D Effects

Framer Sites: 3D Effects

Framer Sites: 3D Effects

·

1:49

·

21K views

·

Mar 22, 2022

About this lesson

How to add 3D effects in Framer.

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

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

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

0:00yo i'm ben and in this video i would 0:03love to show you 3d effects a new 0:05feature we're adding to framer sites 0:08so here we have a demo page 0:11representing 0:12the minting success state of an nft 0:16and 0:17i'm using the artwork from woody's for 0:20this example 0:21and let's add a card flip to the image 0:25so i select it 0:27add an appear effect 0:30setting a very slow 0:33spring with a delay 0:37and you'll find that 0:39in this new version we have a 3d section 0:42here so if i set skill to 1 so you can 0:45see 0:46as i scrub the value 0:48this allows us to add some 3d rotations 0:52so i'm going to go ahead and set rotate 0:54y to 180 0:56opacity to zero 0:58there we go 1:00and then i can right click and copy this 1:02effect now i have a copy of this image 1:06with a blur applied here 1:09and i want this to have the same effect 1:11but just a little bit delay 1:15and starting from 1:1790 instead of 180.1:20cool 1:22and then as a final touch 1:24i added a confetti component 1:28and if we preview this 1:30you'll see that we have a very playful 1:33animation um made in just a few minutes 1:37so coming very soon to framer sides 1:39thank you for watching and hope you 1:41enjoyed the video 1:45[Music]

TeachesAppear Effect

Also coversComponents

Watch on YouTube ↗

‹ Framer Sites: CSS Styles

Framer Sites: Min Max and Aspect Update ›

More in this topic

Framer Update: Logo Shaders

Framer Update12K views · 1 month ago

Framer Update: Holo Shader

Framer Update: Holo Shader

Framer Update6K views · 2 months ago

Shader: Chromatic Aberration

Shader: Chromatic Aberration

Framer Update7K views · 2 months ago

Announcement23K views · 2 months ago

Framer Update: Flow Effect in Layout Templates

Framer Update: Flow Effect in Layout Templates

Framer Update10K views · 3 months ago

Building an Expanding Article Stack in Framer

Building an Expanding Article Stack in Framer

Animations4K views · 4 months ago

Scaling a clipped image on hover in Framer

Scaling a clipped image on hover in Framer

Animations7K views · 5 months ago

Making elements revolve in Framer

Making elements revolve in Framer

Animations5K views · 5 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.