Slide-in Text Animation

What You'll Create

Create text in Squarespace that slides in from opposite directions - one word from the left, another from the right - meeting in the center with a smooth animation. Perfect for creating dramatic headline entrances that grab attention.

The Problem It Solves

Squarespace's animation options are limited to basic entrance effects that apply uniformly to entire blocks. When you want different words within the same headline to animate from different directions, creating a split-reveal effect, you need custom code.

Perfect For

Hero section headlines, Brand taglines, Section introductions, Landing page impact, Creative headlines.

What Makes This Different

You apply special link anchors (#decor-left and #decor-right) to individual words, which tells the code which direction each should animate from. The words start invisible and offset, then slide smoothly into place as the page loads. Accessibility is handled automatically - the links are disabled from being clickable or focusable by screen readers.

Details

• Section Type: Fluid & Classic

• Code Type: CSS + JavaScript

• Prerequisites: Text block with words linked to #decor-left and #decor-right anchors

• Toolkit Title: Slide-in Text

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support