Words appear one by one. Split into spans, stagger their fade-up — agency-website energy from a few lines of code.
Instead of the whole heading appearing at once, individual words or characters animate in one by one as the user scrolls. This is very popular on agency websites, portfolio sites, and anywhere that wants to create a dramatic, editorial feel. The text seems to "write itself" or "emerge" as the user scrolls through.
A JavaScript library called SplitType.js takes a heading like "Hello World" and splits it into individual spans — one per word or even per character. Then GSAP or CSS animations target those spans with a stagger — each one delayed slightly more than the previous. The reveal effect itself can be: fade from opacity 0, slide up from below a clipping mask, or a blurry-to-sharp focus transition.
Press Replay to watch the words tumble in again.
No popups. No autoplay. No dark patterns. Software that respects your attention because attention is the only thing you can never get back.
Create a hero section with a word-by-word text reveal animation. The main headline should be split into individual word spans using a JavaScript loop. On page load (or scroll trigger), each word starts at opacity:0 and transform:translateY(20px), then transitions to opacity:1 and translateY(0). Apply a 0.08 second stagger between each word (word 1 at 0s, word 2 at 0.08s, word 3 at 0.16s, etc.). Use transition-timing-function: cubic-bezier(0.4,0,0.2,1) for a smooth, professional feel. Total animation duration per word: 0.5 seconds.