The fan of photos that rises

Intro, ImagesGSAPMediumCompressed weight: Demo 5.5 KBGSAP 28 KBFreeDownload the zip

A minimal-style intro for a fashion photographer's site: five prints rise one at a time onto an arc, turned more and more towards the sides, and settle with a pixel of give; underneath, one word names the kind of work. Then the prints leave, going out of focus, and the name of the studio is set in their place.

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.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Velure, the opening fan of photos</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the opening of a fashion photographer's site: five prints rise one at a time onto an arc while the word below
       names each kind of work, then the prints go soft and the name of the studio is set in their place -->
  <main class="stage" data-stage aria-label="Velure, fashion photography. Five prints rise onto an arc, then the studio name appears.">
    <div class="fan" data-fan aria-hidden="true"></div>

    <div class="caption" data-caption aria-hidden="true">
      <div class="word" data-word></div>
      <div class="rule" data-rule><span class="rule-mark" data-mark></span></div>
    </div>

    <div class="brand" data-brand>
      <h1 class="brand-name" data-brand-name></h1>
      <p class="brand-line" data-brand-line></p>
    </div>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.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.

39 values to change

Open the Playground

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 “The fan of photos that rises” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

A warm white page, empty. Under the middle a thin line stretches out with five ticks. Then, one at a time from right to left, five white-bordered prints rise from below into their places on an arc: the highest stands straight in the middle, the others go down towards the sides, turned more and more, up to 23 degrees. Every print arrives a little smaller and see-through, rises with a soft brake, goes one pixel past its place and comes back; inside there is only a field of colour with a soft light and the line where the studio backdrop meets the floor, and at the bottom the name of the series, Linen, Chalk, Rouge, Noir, Silk. Only one is vermilion. With each print the big word underneath changes: the old one rises and disappears, the new one comes up letter by letter gaining weight (Editorial, Beauty, Campaigns, Portraits, Music), and a vermilion mark walks along the line to the right tick. With the fan complete everything holds still for a moment; then the prints let go one after the other, from right to left, lifting slightly, the fan goes out of focus and fades, the line pulls back, and in the middle the name of the studio, Velure, is set from the centre outwards, with the line Fashion photography tightening underneath. After a breath the name leaves and it all starts again.

How it works

The places on the arc

The five prints have one place each, written as a share of the width and height of the screen, with a turn and a scale: in the middle 0.5 and 0.19, straight, scale 0.9; at the sides out to 0.22 and 0.78, turned 23 degrees, scale 0.8. They are the places of the site the idea comes from, with a second set for narrow or short screens, where the arc drops and tightens. The height of a print is a share of the height of the screen times its scale. Every print sits in a slot the script places in pixels; inside, the real print is the one GSAP moves, so recomputing on resize never wipes out the motion.

Rising a pixel too far

The prints rise in the site's order, from right to left, place by place: the first straight away, then one every 0.87 seconds. Each starts a quarter of its height lower, at scale 0.88 and see-through, and in 0.527 seconds with power3.out arrives a hair past its place, minus 0.9 per cent and scale 1.006; then in 0.38 seconds with sine.inOut it settles. The opacity arrives a little before the rise ends.

The word and the mark on the line

The five words are already in the page, one on top of the other, each split into letters inside a band that clips what leaves it. With every print the old word rises away with power2.in and the new one rises from below with expo.out, one letter every three hundredths, going from weight 200 to 380 of variable Fraunces. The vermilion mark on the line is a number from 0 to 4 animated by GSAP: on every update it becomes a position in per cent, so it does not depend on the width.

Leaving into the blur

As on the site, every print lets go after a delay of (0.04 plus 0.11 times its position) over 1.1: in 0.2545 seconds with power2.in it fades, rises and shrinks to scale 0.97. Meanwhile the whole fan goes to zero opacity and an 8 pixel blur in 0.6545 seconds with power2.inOut, starting 0.164 seconds in. The studio name is set from the middle outwards with expo.out, going from weight 200 to 520; the line under it tightens from 0.4 to 0.22 em of tracking.

One timeline

The whole direction is one GSAP timeline with repeat -1: at the start of every round a row of sets puts prints, words, line and name back where they begin, so every round is the same. With reduced motion the same timeline uses fades only: no rise, no scale, no blur.

Values to change

Name	File	Default	What it changes
`PRINTS`	script.js	`[{ name: 'Linen', … }, …]`	The five prints from right to left, in the order they rise: the series name, the two tones of the field and where the floor line sits.
`WORDS`	script.js	`['Editorial', 'Beauty', 'Campaigns', 'Portraits', 'Music']`	One word for every print, in the order they rise.
`BRAND`	script.js	`'Velure'`	The name of the studio that takes the place of the prints.
`BRAND_LINE`	script.js	`'Fashion photography'`	The small line under the name.
`STEP`	script.js	`0.87`	The seconds between one print and the next (on the site 0.96 over 1.1).
`RISE`	script.js	`0.527`	The seconds a print takes to rise onto the arc.
`SIZE`	script.js	`0.27`	How tall a print is, as a share of the height of the screen.
`BLUR`	script.js	`8`	How far out of focus the fan goes as it leaves, in pixels.
`HOLD`	script.js	`1.6`	The seconds the full fan holds still before it lets go.

Try them in the Playground

When to use it

For the opening of a photographer's site, a fashion studio, a magazine or a model agency: a loader that shows the work straight away and names the kinds it is divided into, then gives way to the name. Also for the first screen of an image portfolio or a collection.

On phones

The same animation with the phone arc, as on the site: the side prints sit lower and the fan tightens, the word and the name are sized on the height too, so everything fits in the box.

With reduced motion

Nothing moves and nothing blurs: the prints fade in one after the other, the words swap with a fade, then the fan fades away and the name fades in.

Pitfalls

If a print's place and its rise sit on the same element, GSAP's transform wipes out the one written by the layout: the slot has the place and the turn, the print inside only the rise, in per cent of its height.
The mark on the line, animated in pixels, lagged behind when the window changed size: a number from 0 to 4 is animated and written as a per cent on every update.
A timeline that repeats has to put everything back by itself: the sets at time zero of the round also count for the rounds after.

Libraries

GSAP 3.15.0, Fraunces (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 5.5 KB; the libraries: GSAP 28 KB.

Testing

Tested on 22 October 2026

Desktop: Done
Phone: Done
Reduced motion: Done
Safari on iPhone: To do

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.