Animation Engine
Interactive Reveal
Stack transparent image layers and animate them apart — an exploded / peel / assemble product reveal — driven by scroll, hover, drag or click, with labelled hotspots pinned to the parts. Assets live in clutter-free Reveal Packs (uploads/unysonplus/reveal/), never the Media Library.
Layered explode / peel
Take it apart to show what’s inside.
Every reveal below is the same element with a different trigger — layers move by their own offset, rotation, scale and fade, and hotspots fade in as the parts separate. This demo uses a bundled Reveal Pack, so nothing lands in the Media Library.
Hover
Point at the panel to explode it
Voice coil
Logic board
Grille
Drag
Click-drag left ↔ right to scrub
Pin & scrub
Scroll through — it holds full-screen
How to set it up
Add it in under a minute
- Add the Interactive Reveal element (Media Elements).
- Add your part images as Layers — or pick a Reveal Pack (Media → Reveal Packs) so they never touch the Media Library.
- Give each layer a Move / Rotate / Scale + Fade, choose a Trigger (scroll, hover, drag, click), and add Hotspots.
- Save — the parts sit assembled at rest and reveal on the trigger.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.