Smooth Scrolling & Animations with GSAP + Lenis - How to Build a Text Scramble / Decode Animation with GSAP (gsap.ticker Deep Dive)

Characters decode from noise one by one — driven by gsap.ticker, not setInterval. In this tutorial we build a full text scramble system from scratch: a reusable class, a per-character width-locking trick that kills layout shift, and three separate triggers (page load, hover, and ScrollTrigger on scroll). What you'll learn: How gsap.ticker works and why it beats setInterval for frame-accurate animations Per-character width locking using getBoundingClientRect — the fix for layout shift Building a reusable TextScramble class with a Promise-based API A 3-state tick loop: not started / noise phase / resolved scrambleThen() — why a 0.1s pause before decode makes the effect readable on hover ScrollTrigger once: true pattern for one-shot scroll animations Chapters: 00:00 Intro & What We're Building 01:34 Phase 1: Design Tokens & HTML Structure 03:07 Phase 2: CSS Highlights 04:54 Phase 3: JavaScript Setup & Character Pool 05:50 Width Locking Trick (No Layout Shift) 07:04 Phase 4: setText & Tick Loop 09:12 Phase 5: Map Pattern & Hover Interaction 10:44 Phase 6: Page Load & ScrollTrigger 12:27 Outro & Next Steps Tools used: GSAP 3 (gsap.ticker, ScrollTrigger, delayedCall) Vanilla JS — no frameworks Fonts: Barlow Condensed + IBM Plex Mono If this helped, drop a like and subscribe for a new GSAP tutorial every week. How to Build a Text Scramble / Decode Animation with GSAP (gsap.ticker Deep Dive) This video demonstrates a text scramble effect where characters dynamically change from random noise. The animation is driven by GSAP's internal ticker and triggers on page load, on hover, and when interacting with specific words. This tutorial covers the javascript animation and timeline animation techniques used to create this coding effect, providing a comprehensive guide for frontend animation. #GSAP #TextScramble #FrontendDevelopment #WebAnimation #JavaScript #CSSAnimation #gsapticker #ScrollTrigger #PixelPerfect #WebDev #CreativeCode #UIAnimation #gsap2025 #FrontendTutorial