Framer Tutorial ✨

Adding video fill to text without any code. Leggo ↓ 🚶🏻The first thing you'll need to do, is head over to → and grab the "Text Mask" component. https://t.co/1L7To2X45rframer.supply

Framer Tutorial ✨

Let's make these butter-smooth expanding cards in under 5 min If you don't have any frames that you want to animate yet, create some ↓

Throwback to the time I made a working analog clock in Framer.

Doubt anyone needs this, but here’s a tutorial ✨ Start by drawing a white circle, set the opacity to 5%, & rename it to "dial"

Framer Tutorial ✨

Scrub through a video on scroll ↓ Begin by adding a video component to your frame

• resize it to whatever you want
• set its position to "fixed,"
• center it within the viewport

Framer Tutorial + Remix Link ✨

Let’s make this super clickable glowstick button in 5 minutes without any code ↓ 👨🏻‍🍳 Start by creating a button, then turn it into a component.

• create a frame with a 100% relative width and height & set its position to absolute
• remove the fill & center it
• turn it into a vertical stack
• rename it to "Container"
• set "gap" to 0

Quick Tutorial + Figma file ✨

Super easy way to add a chromatic aberration effect to any layer in your Figma project. Legggo ↓ This first part will break down the fundamentals behind the effect. This will work on simple shapes & text layers. For this example, I will use this really round rectangle

Framer's "Start with AI" has been out for a couple of days now & I've seen a lot of discourse surrounding the release.

I've gotten so many DMs asking for my thoughts about it and where I think it's going, so I decided to put it all together here ↓ To preface - I want to give kudos to @jornvandijk & the whole Framer team for pulling this off. This release is a huge achievement and a major milestone for nocode website builders. That said, this is obviously just the beginning

Hey! It's Framer Friday 🤩

Let's add some sweet parallax to our project in under 5 minutes using the underrated "Scroll Speed" effect ↓ This was my initial setup → just a bunch of rows with content stacks. You can start with whatever layout you want, depending on the effect you're trying to achieve 👩‍🎨

It's Framer Friday! 🥳

Let's make this fun card reveal animation (complete with automatic light & dark modes). Legggo ↓ 👩‍🎨 Begin by designing your card. When you're satisfied with the vibes, select it & create a new component (⌘ + ⌥ + K)

If you're following along, we'll also create 2 variables (for the image, and the counter). That way, we can easily update them later.

Let's make this super fun 3D button in @framer ✨ Before we begin, make sure you have some 3D shapes (PNGs are fine).

🧊 These can be whatever you want, here are mine↓

I've been seeing a lot of talk about @framer's new video button. I think it's pretty dope, let's make it! ✨ Begin by drawing a frame → this will be the background of your button. Resize it & round the corners. Then:

• Insert a video, scale it up to the width of your button, & drag it into your frame
• upload your video (duh)

Framer February → Day 28 ✨

A super quick way to display your current visitor's location in @framer. Legggo ↓ 👨🏻‍🎨 Begin by designing your location display. You can do whatever you want, just keep in mind that this override provides 2 properties:

1. City, Region, Country
2. Emoji Flag

Framer February → Day 27 ✨

Recreate @sketch's dynamic nav menu in @framer. Legggo ↓ 👨🏼‍🍳 Create some navbar items, then turn them into components. Add a hover state & customize it to your liking.

• make sure that your links have their width set to "fit content"
• on the primary variant, add a pointer cursor
• repeat for "regular" & "dropdown" link types

Framer February → Day 25 ✨

Create interactive and stackable cards in @framer. Let's goooo ↓ Begin by selecting all of your cards & adding a stack (⌥ • ⌘+ ⏎). Then, change the stack's overflow to "visible" 👀

Framer February → Day 23 ✨

Create clean & minimal tooltips in @framer without any code. Legggo ↓ Start by grabbing an icon from one of the bundled packs & adjust the vibes ✨

Then, design your tooltip & its final position (with reference to your icon). When you're happy with the way everything looks, put the tooltip and the icon into a frame ( ⌘+ ⏎ ) 🖼️

Framer February → Day 22 ✨

Create 🧈 butter-smooth expanding cards using @framer. Let's get it ↓ If you don't have any frames that you want to animate yet, create some ↓

🚨 You can do whatever you want, just make sure that your cards have a fixed width.

Framer February → Day 21 ✨

Make really smooth & bouncy accordion cards in @framer (without any code). Leggggo ↓ 🎨 Start by drawing a card & tweak it to your liking. It doesn't need to be perfect yet.

• make 2 copies, then select all cards & add a stack (⌥ + ⌘+ ⏎)
• set the stack width to whatever you want
• select all cards again & give them a width of 1fr

Framer February → Day 20 ✨

Add a video fill to your text in @framer (without any code). Let's get it ↓ 🚶🏻The first thing you'll need to do, is head over to → framer.supply and grab the "Text Mask" component.

Framer February → Day 17 ✨

This @framer toggle component may or may not be notable ✓ But on the real, here's a Toggle you can add to your Framer project in 2 minutes ↓ 💨

Framer February → Day 16 🌤️

A quick and easy way to display live weather on your website with @framer (you can style it however you want).

This one was super fun to make, I really hope you enjoy ↓ 👨🏻‍🎨 Begin by designing your weather card. You can get creative & use any (or all) of these properties:

→ temperature (actual, feels like, low, high)
→ condition (basic, detailed, icon)
→ air pressure & humidity
→ sunrise & sunset (time)
→ location
→ color (binned by temp)

Framer February → Day 15 ✨

Design your own real-time "Currently Playing" component in @framer with these code overrides ↓ ✶ Begin by designing your player, you can do whatever you want (just keep in mind, this tutorial provides overrides for song name, artist, and album art)