hey, i’m trying to recreate this paper animation effect for a web project and i’m not sure what the best approach is.
reference image attached: it’s a small crumpled piece of paper in step 1, then it slowly unfolds over a few steps until it becomes a flat image of a character (like a sticker reveal). i want to use this as a transition / reveal on a web page.
what i’d like:
- start with a tiny, fully crumpled paper scrap
- animate it unfolding in 3–4 steps
- end on a clean, flat image
- ideally run it in the browser (hover, click, or scroll trigger)
my skill level:
- ok with html / css / vanilla javascript
- pretty new to animation
- open to using gsap if that’s the sane way to do it
my questions:
- is this usually done as a sprite sheet / sequence of pre‑rendered frames (multiple pngs of each unfold step) and then animated with css/gsap?
- or is there a practical way to fake the unfolding with css transforms / masks in real time, without pre‑rendering every frame?
- if sprite sheet is the way to go, how would you structure it with gsap… a timeline that just steps through frames, swaps background images, or uses a sprite‑sheet offset?
- any keywords, example pens, or tutorials that show a similar “paper crumple / unfold reveal” would be super helpful.
bonus: if you’ve done this before, did you create the unfold animation in after effects (or similar) and then export it as a sprite sheet / video for the web? or did you build the whole thing directly in css/js?
thanks in advance for any pointers.
