Webful Live Stream with Aaron Corbut and Gabor from Spline

Introduction

• Hosted by Aaron Corbut at the regular Wednesday time slot, 100 PM Eastern.
• The focus of the session is on integrating 3D animations into websites using Spline and Webflow.
• Special guest: Gabor from the Spline team.

Key Participants

• Aaron Corbut
• Gabor from Spline
• Chat participants: Prem, Isabel, Hamza, Hadie, Silas

Main Discussion Topics

What is Spline?

• Spline is a 3D design tool that enables real-time collaboration in a browser.
• Capable of creating production-ready, interactive web-based experiences.
• Users can integrate 3D elements into websites through platforms like Webflow.
• Applications include product showcases, interactive experiences, mini-games, and branding.
• Recently launched a new feature called 3D Goan Splats.

Demonstration Goals

• Show how Spline works and integrate 3D animations into a Webflow site.
• Example project: Create a 3D "hairy ball" animation in Spline and integrate it into a Webflow page.

Step-by-Step Process

Building the 3D Hairy Ball in Spline

1. Setup:

   • Start with a basic scene in Spline, remove default shapes.
   • Create a cube with dimensions 10x100x10 to form the "hairs."
   • Clone the cube over a sphere (1000x1000x1000) using Spline’s cloner feature.

2. **Randomization and Animation:

   • Apply randomness to the positions and scales of the hairs using Spline's randomness tool.
   • Add a depth material for color transition, using a 3D gradient to create a sense of depth.
   • Add animations to make the hairs move in an organic fashion.
   • Use States and Events in Spline to loop animations (base state and state transition).

Exporting and Integrating with Webflow

• Export the Spline project using the Viewer option to generate a URL for embedding.
• Import the Spline URL into a Webflow project using a Spline Scene component.
• Adjust HTML/CSS settings in Webflow to position the scene correctly.

Enhancing Interaction with Webflow

• Set up interactions in Webflow to change the camera view or scale the object on scroll.
• Use Webflow’s interactions panel to set up a scroll animation that zooms the camera or scales the object.

Additional Tips and Features

• Mobile Responsiveness: Spline scenes can be optimized for mobile using breakpoints and responsive camera settings.
• Performance Optimization: Use Spline’s performance tools to optimize scene size and reduce polygons.
• Learning Resources:
  • Spline’s YouTube tutorials and documentation.
  • Spline community and library for inspiration and templates.

Q&A

• Addressed issues on learning, optimization, and mobile responsiveness.

Conclusion

• Encouragement to explore Spline further, especially with new features and community resources.
• Discount available using code "webflow friends."

Closing Remarks

• Thank you to Gabor and all participants.
• Invitation to the next live session on website localization with Joanna Wong.