Animation Engine
Image Scroll Choreography
Pin flat foreground IMAGES and choreograph each one to the page scroll — it appears (from below / a side / a fade), HOLDS on its corner while the visitor scrolls a whole “chapter”, then exits, all at the scroll % you set. Several images share one scroll timeline (a “kage”-style foreground group), each anchored to a corner, pinned in a fixed layer your sections scroll under, with an opt-in authoring guide. Self-contained runtime, reduced-motion safe.
Foreground on scroll
Images that appear, hold, and exit.
This is the flat-image sibling of the Model Viewer’s Scroll Choreography. Add the Scroll Choreography element (Media Elements), drop in a few transparent images, anchor each to a corner, and set when it appears, how long it holds, and when it leaves — keyed to the page scroll. They pin in a fixed layer, so your sections scroll underneath. The authoring guide is switched on here — the dashed markers and the readout in the corner show each image’s appear / hold / exit points and the live scroll %; you’d turn it off before publishing. Keep scrolling ↓
① The left lantern rises in
At ~12% the first image slides up from below the fold and fades onto its bottom-left anchor — then it just holds there while you keep scrolling.
② The tree slides in from the right
At ~26% a second image enters from the right edge (flipped, gently tilted). Every image is on the same scroll ruler, so they arrive in the order you set.
③ All three hold while you read
Through the middle of the timeline the whole foreground is pinned in place — it stays with you across this chapter, exactly like a “kage” foreground, while the copy scrolls past.
④ Then each exits the way it came
Past ~80% they leave — the lantern drops back down, the tree slides off right, the centre one fades — each gone by the scroll % you chose. Scroll back up and it all replays in reverse.
How to set it up
Add it in under a minute
- Add the Scroll Choreography element (Media Elements) where the sequence should start, then put your “chapter” sections right after it (they scroll underneath).
- On the Images tab, add each transparent image and pick an Anchor (bottom-left, bottom-right, centre…), a width and an edge inset.
- For each image set Appear by + Appear at %, Hold until %, and Exit by + Gone by % — plus an optional tilt and hold size. That’s the appear → hold → exit, keyed to scroll.
- On the Scene tab set Scroll length (screens) to how many sections the group spans, the foreground z-index, and smoothing. Turn on the guide to dial in the exact scroll %, then turn it off before publishing.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.