Making An Interactive Website Just Got Way Easier...
GSAP X WEBFLOW INTEGRATION
Hey guys,
Someone emailed me to ask if I was alive. This reminded me to do a couple of things:
Reach out to friends and family more.
Get back to sending this email consistently.
So, sorry if you’ve subscribed expecting a weekly email about interactive websites and never got them.
Back in now.
In this week’s email:
Webflow X GSAP
Textures, Booleans and taking 2D to 3D all in Spline
What’s coming
Let’s go.
Webflow & GSAP
Webflow acquired GSAP.
WTF is GSAP?
It’s high-performance JavaScript library for creating animations on the web.
Over 80% of “Site of the Day” winners in 2023 use GSAP for animations (source: GreenSock and Awwwards stats).
I repeat.
80% of “Site of the Day” winners in 2023 use GSAP for animations.
Basically, if you want to make a stunning interactive website, you want to be using GSAP.
GSAP is now free.
But, even more excitingly, Webflow released an integrated GSAP feature.
It’s got a super intuitive timeline that you can drag and drop.
I love it.
Go check it out and have a play here.
How do you do it?
Need a tutorial? Look no further than my mate Ilja. Too good.
Textures, Booleans and taking 2D to 3D all in Spline
2D → 3D
First off, how do you change a 2D image to a 3D object?
Turns out it’s mad easy using Spline.
1️⃣ Import Your SVG File
Head over to spline.design and log in or create a free account.
Click Create > 3D Design.
Import your SVG file by dragging and dropping it into the workspace.
💡 SVG files are great because they’re vector-based and retain sharp edges in 3D.
2️⃣ Extrude Your SVG Into 3D
Select your SVG in the scene.
Use the Extrude tool in the right-hand panel to add depth and turn your flat shape into a 3D object.
Adjust the thickness slider to control how much depth you want.
3️⃣ Add Materials and Lighting
Apply a Matcap material for quick shading effects.
Experiment with colors, reflections, and shadows to give your object a professional finish.
Want to read the full article?
Textures in Spline
🎯 1. Using Matcap for Realistic Shading
Want to make your object shiny or metallic?
Select your object in Spline.
Go to the Material panel.
Choose Matcap and select a preset from the library for instant, polished shading.
🔑 Tip: Matcaps are great for creating quick reflections and highlights without complex lighting setups.
🌊 2. Adding Depth Effects for Dimension
Depth effects add a subtle realism to your designs.
In the Material settings, toggle on Depth.
Adjust parameters like depth strength and softness to give your object more dimensionality.
🖼 3. Applying Image Layers for Surface Details
Want to add a texture like wood grain, fabric, or a custom design?
Go to the Image Layer section.
Upload your desired texture image (PNG or JPG).
Adjust scale and tiling to fit your object perfectly.
🎨 This is perfect for making objects like tennis balls, coins, or textured surfaces.
Want to read the full article?
Cutting out shapes
1️⃣ Place Your Shapes in Spline
Start by creating two shapes in your Spline workspace. For example:
Shape 1: A red cube
Shape 2: A blue cube
Drag Shape 1 over Shape 2 so they overlap where you want to create the cut-out.
2️⃣ Select Both Shapes
Click and drag across the workspace to highlight both shapes. You’ll know they’re selected because they’ll light up in the scene.
3️⃣ Subtract the Top Shape from the Bottom Shape
With both shapes highlighted:
Look for the Boolean tools in the top toolbar (icon with two overlapping shapes).
Click on the Subtract option.
This will cut out the top shape from the bottom shape, leaving a clean hole or negative space where the overlap was.
💡 Pro Tip:
The order of your shapes matters! The top shape in the hierarchy will subtract from the one beneath it.
Want to read the full article?
Groovy baby.
Let me know if you guys have any questions.
Final note before I go.
It’s an insanely exciting time to get in to this whole design thing.
So many useful tools, inspiration and supportive community.
So, if you’re still reading this far, you’re clearly in to this whole shindig.
Why not make something every week and share it online.
I promise you’re life will change beyond recognition in a few weeks…
All the best,
Jack
ps. tonnes of cloneables here for Spline!
