The dinosaur-bitten logo
Intro, SVG, Text
NewFree
Back to the library
The pop-up book logo
A logo intro made all of paper, with no characters: a cloth-bound book drops onto the table, the cover swings open and the pop-up pieces stand up out of the fold, each with its own spring: the sun, the clouds, the logo letter by letter, the hills. The pull tab slides out by itself and paper scraps jump out. In the Playground you type your own name or upload your own logo.
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>The pop-up book logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/young-serif@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the stage: the script measures it and builds the book, its pages and the paper pieces folded inside -->
<svg class="palco" data-stage role="img" aria-label="Paperlark" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- the grain of the paper: a little tile of specks and fibres the script paints on a canvas -->
<pattern id="grain" patternUnits="userSpaceOnUse" width="180" height="180">
<image width="180" height="180" data-grain-image />
</pattern>
<!-- the shade where the pages curve down into the spine -->
<linearGradient id="gutter-near" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" class="piega-stop" />
<stop offset="1" class="piega-stop piega-stop--via" />
</linearGradient>
<linearGradient id="gutter-far" x1="0" y1="1" x2="0" y2="0">
<stop offset="0" class="piega-stop" />
<stop offset="1" class="piega-stop piega-stop--via" />
</linearGradient>
<!-- the soft shadow of the book on the table -->
<filter id="soft" x="-30%" y="-60%" width="160%" height="220%" data-soft>
<feGaussianBlur stdDeviation="10" data-soft-blur />
</filter>
</defs>
<g data-world>
<path class="ombra-tavolo" filter="url(#soft)" data-table-shadow />
<!-- the book: the back half lies still, the front half (the cover with the first page) turns on the spine -->
<g data-book>
<g data-base></g>
<g data-panel></g>
<!-- the pop-up pieces, from the back to the front: their shadows, the clouds, the sun, the logo, the hills -->
<g data-pops>
<g data-shadows></g>
<g data-clouds></g>
<g data-sun></g>
<g data-letters></g>
<g data-hills></g>
</g>
</g>
<g data-fx></g>
</g>
</svg>
<p class="nota">Click or tap to see it again</p>
</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.
41 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 “The pop-up book logo” from Animorio and fit it into my siteWhat it does
On a sand-coloured table a book bound in blue cloth drops from above, with a gold label on its cover holding the name of a made-up brand, Paperlark. It lands squashing, makes a little hop and settles, with two puffs of dust at the sides and its red satin bookmark swinging on the table; from the front of the book sticks out a paper tab that says PULL. The cover twitches twice, as if something inside wanted out, then swings open on the spine: it lifts, for a moment we see it edge on, it shows the inner page and slaps down flat with a little bounce. As the pages open, the paper pieces stand up out of the fold, each with its own spring and a soft shadow on the page behind: first a big rayed sun, half hidden in a pocket of the page, turning as it rises; then two clouds on their tabs; then the logo, one letter at a time, every letter a red card with the white cut edge, standing on a tab, rising crooked and straightening with a wobble; last two rows of scalloped hills in front. The PULL tab slides out by itself and springs back: the sun makes a half turn, the letters dip and rise one after the other like a wave, the clouds jump and a handful of paper scraps flies up and tumbles down onto the front page, where Stories that stand up is printed. The logo stays on show with the letters swaying a little, the sun turning slowly and the clouds floating; after a few seconds the pieces fold back down, the cover closes and the book slides away, and it all starts again. A click restarts it. A picture can take the place of the word: it is printed on a card that stands up out of the fold.
How it works
A table seen from above
The stage is an SVG whose viewBox is as big as the window. Everything is counted in letter heights and in three directions: X across the book, D along the pages towards us (0 is the spine), Z upwards. One function brings a point of the book to the screen: y = D·0.62 − Z·0.785 (the table seen from about 38 degrees) plus a touch of perspective that widens what is closer. The pages, the boards, the edges of the pages, the bookmark and the tab are polygons built with that function; the printed words (the cover label, the line on the page, PULL) are drawn in their own pixels and laid on the book with a matrix() taken from three corners.
The cover that turns
The half that opens is a single angle, from 0 (closed) to 180 (open and flat): a point at distance r from the spine sits at D = r·cos, Z = r·sin, and the board of the cover is pushed out by its thickness along the normal. Every frame the paths are worked out again. The dot product with the direction of the eye says which face we see: under 38 degrees the cloth with the label, above it the inner page, and at the switch the order of the layers changes too (from outside the edges of the pages lie under the cover, from inside the board is behind). The edges of the pages show only while they face us.
The pieces that stand up
Every pop-up piece (sun, clouds, letters, hills) is a group with a value u, from 0 (lying in the fold) to 1 (standing), written as a transform around its foot: translate, rotate, skewX, scale(1 u). A dark veil of the same drawing fades as it rises, and a blurred copy is its shadow on the page behind, clipped by the outline of the page. The letters are measured on a canvas and each one is a card with its cut edge and a tab; the sun is half hidden by a clipPath, the pocket of the page, and turns on itself.
The spring of the paper
The pieces rise with elastic.out, longer or shorter depending on SPRING, starting crooked and leaning and straightening with the same spring. Past 1 a piece leans back and looks a little taller: the excess is halved, so the paper does not turn into rubber. The wave after the tab lowers and raises the letters one by one; the paper scraps fly in an arc (up with power2.out, down with power1.in), spin and flip with scaleX and land on the front page before they vanish.
Direction and your logo
The whole intro is one timeline, with the labels start, land, knock, open, slap, pop, reveal, pull, rest and leave and timeScale for the speed. At rest the letters sway out of step, the sun turns slowly and the clouds float; with LOOP the pieces fold down, the cover closes and the book leaves. If IMAGE holds an address the logo becomes a card with the picture, which stands up like a single letter and also shows on the cover label. In the Playground, next to the field, there is a button to upload a file, which goes into the code as a data: address.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
NAME | script.js | 'Paperlark' | The logo as a word: every letter is a card that stands up out of the fold of the book; the name is also on the cover label. |
IMAGE | script.js | '' | The logo as a picture: the address of a file, or upload it from your computer. If there is one, it takes the place of the word, on a card that stands up. |
TAGLINE | script.js | 'Stories that stand up' | The line printed on the front page, under the logo (empty = no line). |
SPRING | script.js | 1 | How springy the paper is: 0 = the pieces just stand up, 2 = they wobble a long time before they stop. |
CONFETTI | script.js | 1 | How many paper scraps jump out when the tab is pulled (0 = none). |
SUN | script.js | true | The paper sun turning behind the logo and the two clouds; with false only the logo and the hills are left. |
SPEED | script.js | 1 | The speed of the whole animation: 2 is twice as fast, 0.5 half as fast. |
REST | script.js | 4 | How many seconds the logo stays on show before the book closes. |
LOOP | script.js | true | Whether the book closes, slides away and a new one comes. With false the logo stays standing, swaying. |
When to use it
To present a logo with a gesture that smells of paper and stories: the opening of the site of a publisher, a bookshop, a stationery shop, a children’s brand or a paper studio, a preview for a client, a loading screen, a social post. It works with a written wordmark and with a picture.
On phones
The same animation with the sizes adapted: on a tall screen the pages get deeper, the sun bigger and the logo is almost as wide as the screen. A tap restarts it.
With reduced motion
Nothing moves: the closed book fades in, then fades out and the open book with the logo and the pieces already standing fades in in its place. If the animation starts again, the book leaves with a fade too.
Pitfalls
- The turning page looks taller when it faces us (around 128 degrees) than when it lies flat: with the sizes taken from the open book it went past the top of the screen. The size takes that moment into account too.
- The shadow of the pieces made by squashing and slanting a copy of them showed between the tabs, under the letters, like a reflection: it became a copy moved up and to the right and blurred, falling on the page behind.
- With the elastic ease the pieces went far past their true height and the sun turned into an egg: past 1 the excess is halved, just enough to look like paper leaning back.
- The hills in front covered the feet of the letters: the letters stand on tabs a quarter of a letter tall, and the tops of the hills stay below their base.
- The shadow of the book on the table, an ellipse, made a grey halo around the far page, which is narrower because of the perspective: now it is the outline of the book itself, closed or open, blurred and a little lower.
- Between the cloth and the inner page the order of the layers of the turning half changes too, otherwise from outside the edges of the pages ended up over the cover: it is reordered only once, when the face changes.
Libraries
GSAP 3.15.0, Young Serif 5.3.0.
Compressed with gzip, the three demo files weigh 15 KB; the libraries: GSAP 28 KB.
Testing
Tested on 13 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.
