The melting sheet
Scroll, Hover, Images
Free
Back to the library
Columns going opposite ways
Scroll inside the preview
A wall of posters in three columns: as it crosses the window the two outer ones rise and the middle one sinks, so the posters slide past each other. Pointing at a poster pops a ticket with the time, which grows past its size while tilting and settles more tilted.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Columns going opposite ways</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/gloock@5.3.0/400.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/outfit@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="bar">
<a class="brand" href="#">Night Owl Film Club</a>
<nav class="bar__nav" aria-label="Sections">
<a href="#">Programme</a>
<a href="#">Membership</a>
<a href="#">Find us</a>
</nav>
</header>
<section class="intro">
<p class="intro__kicker">The autumn season</p>
<h1 class="intro__title">Twelve films, one very long night.</h1>
<p class="intro__hint">Scroll down the programme. Point at a poster for its time.</p>
</section>
<!-- the programme: three columns of posters; scrolling, the outer ones go up and the middle one comes down -->
<section class="wall" data-wall>
<div class="columns">
<div class="column" data-column="up"></div>
<div class="column" data-column="down"></div>
<div class="column" data-column="up"></div>
</div>
</section>
<section class="outro">
<h2 class="outro__title">Doors at nine. Bring a blanket.</h2>
<a class="outro__link" href="#">Become a member</a>
</section>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
<script src="script.js"></script>
</body>
</html>Playground
Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.
65 values to change
Or ask Claude Code for it
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “Columns going opposite ways” from Animorio and fit it into my siteWhat it does
The home page of an invented film club, Night Owl Film Club, on a night background. After the headline «Twelve films, one very long night.» comes the programme: twelve drawn posters, with a sun on the horizon, a moon, stripes, mountains, waves, an arch, rings and rays, in twelve colour pairs, each with the film’s title. They stand in three columns: while the wall crosses the window, the side columns rise and the middle one sinks, faster early in the crossing and then more slowly, so the posters slide past each other. At the top and bottom the wall fades. Pointing at a poster pops a cream ticket with the screen and the time, which grows a little past its size while tilting and settles more tilted; when the pointer leaves the ticket shrinks and straightens.
How it works
The posters
The script draws twelve posters in SVG, 300 by 420: a background, one motif out of eight, the club’s name and the title on two lines in Gloock. It puts four in each column, with the ticket inside each.
The columns
A ScrollTrigger with scrub runs from when the wall enters at the bottom to when it leaves at the top. The columns marked up take the travel as a negative, the down one as a positive; the one that sinks starts higher by the whole travel, worked out from the longest step, so no gap is ever left at the top.
The steps of the travel
The travel follows the original’s steps: 100 pixels at a tenth of the way, 200 at a fifth, then 100 more every fifth up to 600. Before the first step the columns are already where that step says. So for the first tenth the wall holds still, up to a fifth it moves at twice the speed, and then it slows down; on a narrow screen the travel is halved.
The ticket
When the pointer arrives the ticket starts from scale 0 and, after 0.1 seconds, grows to POP[0] while tilting POP[1] degrees in 0.2 seconds, then settles at 1 tilted POP[2] in 0.1: it is the pop of the images on the site’s project columns (1.1, 5 and 10 degrees). When the pointer leaves it shrinks in 0.4 seconds, fades in 0.2 and straightens.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
TRAVEL | script.js | [[0.1, 100], [0.2, 200], [0.4, 300], [0.6, 400], [0.8, 500], [1, 600]] | How far the columns have travelled at each point of the crossing: (share of the way, pixels). |
NARROW | script.js | 0.5 | On a narrow screen the columns travel this share of the distance. |
SMOOTH | script.js | 0.6 | The seconds the columns take to catch up with the scroll. |
POP | script.js | [1.1, 5, 10] | The ticket: the size it grows to before settling, the tilt while it grows, the tilt it settles at (degrees). |
FILMS | script.js | [['Moon Over', 'Pier 9', 'Fri 21:00'], …] | The films: the two lines of the title and the time on the ticket. |
When to use it
For a programme, a catalogue or a portfolio of covers: many images of the same format. With few images the columns run empty; with images of different formats the wall looks messy.
On phones
Two columns instead of three and half the travel. The ticket appears when you tap the poster and goes when you tap it again.
With reduced motion
The columns hold still; the ticket fades in and out, already tilted.
Pitfalls
- The sinking column must start higher by the whole travel, or it leaves a gap at the top as it sinks: the script works out the margin from the longest step, so it follows changed values too.
- Before the first step the columns are already where that step says, as on the site: when the wall comes in they have already moved 100 pixels.
- The wall cuts what sticks out: without a fade at the top and bottom the posters are cut sharp as the wall comes in and goes out.
Libraries
GSAP 3.15.0, Gloock 5.3.0, Outfit (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 5.5 KB; the libraries: GSAP + ScrollTrigger 45 KB.
Testing
Tested on 2 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: Done
License
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
