Tweet

Aleks

Feb 8 • 11 tweets • 4 min read

@splinetool

Framer February → Day 8 ✨

✶ 2 for 1 special: create a interactive 3D scene in @splinetool & add it to your @framer project. Let's go ↓

Fire up Spline, and set up for your scene:

• set a light bg color that complements your color scheme
• add your first shape (or object), and set its position to 0, 0, 0
• sprinkle in some more shapes

👨🏼‍🍳 Now, it's time to cook up some materials. I'm making 3 → an off-white, purple, and glass.

Since this isn't meant to be a Spline tutorial, I'm not going to write out the configs. Pause the video and copy the values if you're following along.

Assign the materials we just created to your composition as you see fit. There's no wrong way to do this, just follow the ✨ vibes ✨

Once your materials are added, you might realize that the colors we chose earlier aren't quite perfect. If so, just go back & tweak them until you're happy with the result.

At this point, all of your objects are on the same plane, which isn't ideal for what we're trying to do. Move them around to create some depth to your composition.

☝️ Make sure to keep the main shape at the 0, 0, 0 position

This step is optional, but you can tweak the light sources to create even more depth ↓

Great work, your 3D scene is complete! It's time to export it and get it ready for your Framer project.

👆Disable Pan & Zoom, and you're ready to go!

Inside of Framer, add an "Embed" element to your canvas and paste the URL you copied from Spline.

You're done, but if you want to add some extra 🌶️ spice, enable the "On Hover" property back in Spline.

All done! Look at it go 🥹

🛸 I hope you found this tutorial helpful. If so, please RT to spread the love

• • •

Missing some Tweet in this thread? You can try to force a refresh

This Thread may be Removed Anytime!

Twitter may remove this content at anytime! Save it as PDF for later use!

More from @aleksliving

Aleks

@aleksliving

Feb 9

@framer

Framer February → Day 9 ✨

I’ve gotten a few DMs asking for more beginner friendly tutorials. You got it – here's a super simple (but cute) lightbox in @framer. Legggoo ↓

Begin by adding a frame (F) to your stack, then set its width & height values to "fill"

• rename the frame to "canvas"
• adjust the padding of your stack to give it some breathing room
• remove the fill from the frame

Draw another frame below the canvas, set the width & height you'd like, then:

• add a stack (⌥ • ⌘+ ⏎)
• set the height of the stack to "auto" & distribute to "space between"
• duplicate the frame as many times as it takes to fill in the stack without overwhelming it

Read 10 tweets

Aleks

@aleksliving

Feb 7

@framer

Framer February → Day 7 ✨

Scrub through a video on scroll in @framer. So many cool uses for this, let's get started ↓

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

Add your video source (I'm adding a URL, but you can upload your video for the same result)

• bump up the radius (or don't)
• make sure "playing" attribute is set to "no"
• then increase the height of your breakpoint (to allow for plenty of scrolling)

Read 9 tweets

Aleks

@aleksliving

Feb 6

@framer

Framer February → Day 6 ✨

Create super dope draggable windows (or anything else) in @framer. Here's how ↓

✶ For the purpose of this tutorial, I'll be showing a use case where your website has an overlay with the draggable container inside of it. That said, you can make anything else draggable using this same method!

☝️ Begin by creating an anchor for your pop up overlay. This can be an icon, button, or anything else.

In this case, I'll be opening the overlay modal with some centred text.

Read 9 tweets

Aleks

@aleksliving

Feb 6

@framer

Framer February → Day 5 ✨

A super quick way to create a gradient cursor highlighter in @framer. Let's get started ↓

🥹 As always, begin by drawing a frame (F)

Next, add a fill (𝘶𝘴𝘦 𝘥𝘢𝘳𝘬𝘦𝘳 𝘤𝘰𝘭𝘰𝘳𝘴 𝘰𝘯 𝘥𝘢𝘳𝘬 𝘣𝘢𝘤𝘬𝘨𝘳𝘰𝘶𝘯𝘥𝘴, 𝘢𝘯𝘥 𝘭𝘪𝘨𝘩𝘵𝘦𝘳 𝘤𝘰𝘭𝘰𝘳𝘴 𝘰𝘯 𝘭𝘪𝘨𝘩𝘵 𝘣𝘢𝘤𝘬𝘨𝘳𝘰𝘶𝘯𝘥𝘴)

• Add a corner radius (if you want...)
• Add a border (use a width of 1-3px)

Read 12 tweets

Aleks

@aleksliving

Feb 4

@framer

Framer February → Day 4 ✨

Getting rid of those pesky scroll bars in @framer. Because sometimes, you just need some peace in your life. Let's get started ↓

@rafunderscore

The first thing we're going to need, is some code for the scrollbar override written by the talented @rafunderscore. You can find it on his GitHub here → bit.ly/3js4UZl

☝️Next, we'll need to set up a code override. To do this:

• Head over to Assets → Create Code File → "New Override"
• Name this whatever you'd like
• Replace the code you see with the code you copied earlier

Read 5 tweets

Aleks

@aleksliving

Feb 3

@linear

Framer February → Day 3 ✨

Mini experiment: recreating the @linear gradient in @framer (based on @FonsMans' Figma tutorial). Let's get started ↓

Unfortunately, Framer only natively supports Linear and Radial gradients in the editor. So we'll need to head over to framer.supply and grab the conic gradient from there.

Now we'll need to get the set up right ☝️

• Set the conic gradient angle to 90º (do not rotate the component)
• Set height to 100% and width to 50%
• Left align