Sliding Panel Reveal

What You'll Create

As visitors scroll, side panels dramatically slide away to reveal the content behind them. Images on the left slide left, images on the right slide right, creating a cinematic curtain-opening effect that draws attention to your main content.

The Problem It Solves

Squarespace doesn't offer scroll-triggered reveal animations. Creating the effect of panels sliding apart to reveal content typically requires advanced animation knowledge. This technique brings movie-style reveals to your Squarespace site with a polished, professional feel.

Perfect For

Portfolio project reveals, Brand story introductions, Product launch pages, Creative agency showcases, Landing page hero sections.

What Makes This Different

The sliding animation is directly tied to your scroll position - the panels move in sync with how far you've scrolled, creating a satisfying connection between your movement and the visual change. A color overlay fades away as the panels slide, adding depth to the transition. The section stays pinned while you scroll through the effect, then releases to let you continue down the page.

Details

• Section Type: Fluid Engine

• Code Type: CSS + JavaScript

• Prerequisites: Images with 'scroll-left' or 'scroll-right' in filename, GSAP library, Next section configured as reveal target

• Toolkit Title: Sliding Panel Reveal

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