Earlier this month at Webflow’s Conf 2023, exciting announcements set the posture for Webflow with some explosive momentum in the coming year. One such announcement is the reveal of the new 3D Spline Integration within Webflow. Now, Webflow developers can make some amazing customizations straight from the platform to customize the utility of 3D assets inside a website. It is a game-changer!

Create 3D Animations in Spline

Spline is an app for creating Interactive 3D scenes or elements with embed-friendly capabilities. A spline element on a website typically adds interactive elements for users to engage with. Some of the interactions that a viewer may see include lighting changes, animations, changes based on cursor position, or even game controls. Using a combination of states, a designer can create a unique set of interactions to add a wow factor to a website.

Spline for Web Design: Pre-Webflow Integration

Historically, Spline has been solely in the hands of the designer. Once a designer creates an element in Spline, they relay the embed code to a developer, and the Webflow design is treated much like a photo or video. It simply has a slot on the site that it filled, and if there are necessary adjustments, the developer contacts the designer for the update. Plug and play!

Webflow Spline Integration: 3D for the Future

Today, with the new Webflow Spline integration, the line between the graphic designer and developer is much looser. They become a team collaborating on interactivity that can be much more immersive and custom throughout the page on a site. With proper Spline file naming conventions, the developer gains access to a set of tools within Webflow that allow them to use the elements a designer has created. Developers have new customization capabilities, including page positioning, animations, and general use of a Spline element relative to all other elements on a webpage.

The developer now has the power to alter the Spline asset; however, it needs to be within the Webflow environment, including animation choices, the position of the element in front of or behind the text, and how it appears as you scroll down the page at different key points, all without getting updates from the designer. It’s a big step that moves Webflow into a space where there is a lot more freedom for Webflow agencies like Red Shark Digital to transform sites into pieces of art.

What’s new in Webflow Spline?

Within Webflow, a developer will now see an option for “Spline Scene.” This new feature allows them to paste the URL of their Spline Scene into Webflow’s URL field. Webflow developers have new options for customizing any or all of the parts of the Spline element. Specifically, there are options for what user event triggers an action. Actions can be very customized using keyframes and a combination of spacing and timing options. In just a few clicks, a developer really has the freedom to position and animate all the parts of a design without leaving Webflow.

Webflow Spline Integration Changes the Game

Webflow already offers some of the best functioning and aesthetically beautiful websites around. As a nationally ranked Webflow agency, we are beyond inspired to have one more tool in our belt that will continue to allow us to push the boundaries of what is possible visually and bring even better engagement with the end-user. Websites will continue to become more complex, and interactive 3D work will be a giant factor. This integration is one significant step toward the future of web development.

We look forward to sharing more about the future of Webflow and Spline with upcoming updates and content releases!