In this beginner tutorial we'll go from Figma to an animated Spline 3D Website in my favourite web design tool Framer.

🔴 Framer Course Waitlist: timgabe.com/framer-course
💜 Working Files: timgabe.com/resources/scrollable-3d-website

Timecodes
00:00 - Intro to tutorial.
00:17 - Starting with converting Figma designs to a Framer website.
00:25 - Exporting from Figma to Framer using the Framer plugin.
00:52 - Importing and arranging elements in Framer.
01:01 - Adjusting navigation and hero section in Framer.
01:16 - Adding and positioning blur effects in Framer.
01:48 - Dragging images into Framer and setting their position.
01:59 - Customizing color and layout settings in Framer.
02:26 - Setting max width for sections in Framer.
02:48 - Completing the initial export for the website in Framer.
03:00 - Introduction to creating 3D objects with Spline.
03:14 - Starting a new project in Spline and preparing the workspace.
03:47 - Exporting shapes from Figma to use in Spline.
04:05 - Importing and adjusting shapes in Spline.
04:18 - Customizing the 3D cube in Spline.
05:00 - Adjusting cube color and lighting in Spline.
05:22 - Enhancing cube appearance with material settings in Spline.
06:01 - Fine-tuning lighting and shadow effects in Spline.
06:35 - Adding bloom effects to enhance the 3D cube in Spline.
07:00 - Creating different states for the cube animation in Spline.
07:23 - Setting up cloner and adjusting cube states in Spline.
08:02 - Animating the cube with scroll interactions in Spline.
09:09 - Export settings and finalizing the 3D element in Spline.
09:32 - Adding Hollywood camera effects in Spline.
10:37 - Adjusting camera states for different cube animations in Spline.
11:49 - Implementing scroll interaction with the camera in Spline.
12:01 - Adding levitation effect to the cube in Spline.
12:42 - Creating a slide-up animation for the cube in Spline.
13:47 - Preparing Framer for 3D element integration.
14:25 - Setting up embed and scroll container in Framer.
15:05 - Configuring layout and visibility settings in Framer.
15:52 - Adjusting section heights and z-index in Framer.
16:35 - Adding scroll animations to text fields in Framer.
17:30 - Applying custom 3D animations to elements in Framer.
18:59 - Finalizing animations for all sections in Framer.
19:25 - Exporting the 3D animation from Spline to Framer.
20:00 - Embedding the 3D animation in Framer and final review.
20:17 - Conclusion.

свернуть