Split Screen Gallery with Opposite Animations

What You'll Create

Two gallery slideshows displayed side-by-side that slide in opposite directions, creating a dramatic split-screen effect. Add large overlay text at the intersection point for maximum visual impact.

The Problem It Solves

Squarespace gallery sections stack vertically by default. If you want that editorial, split-screen look with synchronized galleries moving in different directions, there's no built-in option. This technique repositions galleries side-by-side and customizes their animation directions.

Perfect For

Portfolio showcases, Before/after displays, Dual brand presentations, Photography portfolios, Creative agency sites

What Makes This Different

This goes beyond simply placing galleries next to each other. The code overrides default Squarespace gallery animations so each side slides in the opposite direction. Combined with large overlay text positioned at the center seam, you get a cohesive, intentional design that looks like a custom build.

Details

• Section Type: Fluid & Classic (Gallery)

• Code Type: CSS

• Prerequisites: Two gallery sections with different color themes, Fullscreen slideshow transition

• Toolkit Title: Split Gallery

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