Animate on Scroll

What You'll Create

Elements that animate into view as you scroll down the page. Sections, images, text blocks, or any element can start invisible or transformed, then smoothly transition to their final state when they enter the viewport.

The Problem It Solves

Squarespace's built-in animations are limited to basic entrance effects. When you want custom scroll-triggered animations with full control over timing, direction, and style, you need a different approach. This technique lets you create any CSS-based animation triggered by scrolling.

Perfect For

Portfolio project reveals, Section entrance animations, Image fade-ins, Text reveal effects, Progressive content loading.

What Makes This Different

The animation is triggered by an Intersection Observer that watches when elements enter the viewport. You define the starting state and the animated state using simple CSS, then the script automatically adds an 'animate' class when the element scrolls into view. You have complete control over the animation style - scale, slide, fade, rotate, or any combination you can dream up.

Details

• Section Type: Fluid & Classic

• Code Type: CSS + JavaScript

• Prerequisites: CSS selectors for target elements, Basic understanding of CSS transitions/transforms

• Toolkit Title: Animate on Scroll

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