How to Create Stunning Scroll-Driven 3D Text Effects with CSS and GSAP
In this tutorial, you will learn how to create mesmerizing scroll-driven 3D text effects using CSS, JavaScript, and the GSAP library. By combining CSS transforms with GSAP’s ScrollTrigger plugin, you can produce smooth, high-performance animations that elevate user experience on any website.
Initial Setup
Begin by initializing your project. A clean structure is essential, so let’s create a simple class-based JavaScript model. This will include an App class to serve as your main entry point and separate classes for each animation effect.
Project Structure
Your project should have a setup that looks like this:
typescript
import { gsap } from “gsap”;
import { ScrollTrigger } from “gsap/ScrollTrigger”;
import { ScrollSmoother } from “gsap/ScrollSmoother”;
class App {
smoother!: ScrollSmoother;
constructor() {
gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
this.init();
this.addEventListeners();
}
init(): void {
this.setupScrollSmoother();
}
setupScrollSmoother(): void {
this.smoother = ScrollSmoother.create({
smooth: 1,
effects: true,
});
}
addEventListeners(): void {
window.addEventListener(“resize”, () => this.resize());
}
resize(): void {
console.log(“Resized”);
}
}
new App();
Utilizing GSAP
GSAP’s ScrollTrigger and ScrollSmoother plugins are pivotal here. ScrollSmoother ensures our scroll experience is fluid and GPU-accelerated, while ScrollTrigger links our animations directly to scroll progress, providing seamless motion.
Creating 3D Text Effects
1. Cylinder Effect
The first effect positions text around an invisible cylinder that becomes visible as you scroll.
HTML & CSS Structure
Start by building your HTML:
Keep scrolling to see the animation
- Design
- Development
- Branding
Style the elements:
css
.cylinder__wrapper {
height: 100vh;
perspective: 70vw;
}
.cylindertextwrapper {
transform-style: preserve-3d;
position: absolute;
font-size: 5vw;
text-align: center;
}
2. Circle Effect
The circle effect utilizes two parallel text columns rotating in opposite directions.
HTML Structure
Use separate columns to represent text:
- Design
- Development
3. Tube Effect
The tube effect provides a 3D tunnel animation by stacking text along the Z-axis.
HTML Structure
Use a single list for the text items:
- Design
JavaScript for Dynamic Positioning
Whether it’s for the cylinder, circle, or tube effects, a combination of JavaScript and GSAP will enable you to dynamically position your text items.
javascript
calculatePositions(): void {
const offset = 0.4;
const radius = Math.min(window.innerWidth, window.innerHeight) * offset;
const spacing = 360 / this.items.length;
this.items.forEach((item, index) => {
const angle = (index spacing Math.PI) / 180;
const x = Math.sin(angle) radius;
const z = Math.cos(angle) radius;
item.style.transform = `translate3d(${x}px, 0, ${z}px) rotateY(${index * spacing}deg)`;});
}
Bringing It All Together with ScrollTrigger
Each of the effects will be linked to user scroll activities using GSAP’s ScrollTrigger.
javascript
ScrollTrigger.create({
trigger: “.cylinder__title”,
start: “center center”,
end: “+=2000svh”,
scrub: 2,
animation: gsap.fromTo(
this.textWrapper,
{ rotateY: 0 },
{ rotateY: 360, ease: “none” }
),
});
Conclusion
In this post, you have learned to create stunning 3D text effects using CSS and GSAP. Each effect enhances the scroll experience, making your website more engaging.
Feel free to experiment with the parameters to develop unique variations, and don’t hesitate to share your creations!
Related Keywords
- GSAP animations
- Scroll-triggered effects
- CSS transform animations
- 3D text animations
- Scroll-based animation techniques
- Creative web design
- User experience enhancements
