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.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>3D animation & interaction with Spline</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;800&display=swap" rel="stylesheet">
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"@splinetool/runtime": "https://unpkg.com/@splinetool/runtime@0.9.210/build/runtime.js"
}
}
</script>
<script type="module">
import { Application } from '@splinetool/runtime';
const canvas = document.getElementById('canvas3d');
const app = new Application(canvas);
app.load('https://prod.spline.design/AbmUKDGFJur-kPdr/scene.splinecode');
</script><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="w-screen h-screen bg-gradient-to-b from-slate-900 to-black select-none">
<div class="h-full w-full">
<canvas id="canvas3d" class="block relative z-50"></canvas>
<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-10 w-[84%] max-w-[84vh] h-[84%] max-h-[84vw] bg-gradient-to-b from-slate-900 to-black">
<div class="absolute w-px h-screen bg-white left-0 top-1/2 -translate-y-1/2"></div>
<div class="absolute w-px h-screen bg-white right-0 top-1/2 -translate-y-1/2"></div>
<div class="absolute w-screen h-px bg-white left-1/2 top-0 -translate-x-1/2"></div>
<div class="absolute w-screen h-px bg-white left-1/2 bottom-0 -translate-x-1/2"></div>
</div>
</div>
<div class="title text-white text-[12vw] font-extralight w-full whitespace-nowrap absolute z-0 left-0 top-1/2 -translate-y-1/2">
<span>Geometric shapes</span>
<span>Geometric shapes</span>
<span>Geometric shapes</span>
</div>
</div>
<!-- partial -->
<script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script><script src="./script.js"></script>
</body>
</html>
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.
