Introduction
In this tutorial, we will create a stunning 3D animation and interactive scene using Spline, integrated with HTML, CSS, and JavaScript. This example demonstrates how you can combine 3D tools with modern web development technologies to deliver a rich user experience.
What You Will Learn
- How to integrate 3D assets from Spline into your webpage.
- Applying custom animations with GSAP.
- Working with Tailwind CSS for responsive and gradient-based designs.
Technologies Used
- HTML: For the webpage structure.
- CSS (Tailwind CSS): To style the page and create a gradient background.
- JavaScript: To integrate the 3D object and create animations.
- Spline: For creating and exporting the 3D scene.
- GSAP (GreenSock Animation Platform): For smooth, looping text animations.
Step 1: Setting Up the HTML Structure
Here’s the basic HTML setup. We use a canvas
element to embed the 3D model from Spline and layers of text with dynamic animations on top.
3D animation & interaction with Spline
Geometric shapes
Geometric shapes
Geometric shapes
Step 2: Adding Styles with CSS
We’ll apply minimal styling using CSS and Tailwind to handle the layout and typography. We ensure that the fonts and the page size are optimized for different screen sizes.
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200&display=swap');
html,
body {
width: 100%;
height: 100%;
}
body {
font-family: 'Manrope', sans-serif;
overflow: hidden;
}
Step 3: JavaScript for GSAP Infinite Loop
We use GSAP to animate the looping text, providing a smooth and continuous scrolling effect.
/* TITLE INFINITE LOOP */
document.querySelectorAll('.title').forEach(function (e, i) {
let row_width = e.getBoundingClientRect().width;
let row_item_width = e.children[0].getBoundingClientRect().width;
let offset = ((2 * row_item_width) / row_width) * 100 * -1;
let duration = 100 * (i + 1);
gsap.set(e, {
xPercent: 0
});
gsap.to(e, {
duration: duration,
ease: "none",
xPercent: offset,
repeat: -1
});
});
Step 4: Spline 3D Model Integration
The key part of this project is embedding the 3D model using Spline. After creating the 3D object in Spline, you can export the scene URL and load it dynamically into the canvas
element.
- You can create and customize the 3D model within Spline, and then copy the exported scene URL into your HTML script.
Video Preview Of 3D Interactive Animation Using Spline
Conclusion
This project shows how you can integrate Spline’s 3D capabilities with modern web development technologies to create interactive and visually rich animations. Using GSAP for smooth transitions and text animations enhances the overall user experience, while Tailwind CSS helps keep the styling clean and responsive.