Is this possible using three.js? PLEASE GUIDE

[Nadem_Od]

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:

1. 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?
2. or is there a practical way to fake the unfolding with css transforms / masks in real time, without pre‑rendering every frame?
3. 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?
4. 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.

[seanwasere]

Maybe you don’t need Three.js.
Does it need be a 3D object that you can interact with in the browser?
I used Wan2.2 FLF2V for this.

[Nadem_Od]

No, I just want images turn into paper unfold, that also in browser, no backend.

[Daniel_Rodrigues]

As seanwasere said, you may not need threejs for this, but if I had to do it, I’d apply the image as a texture to a plane geometry and apply deformations to it. Similar to this. I’d have an initial state with the coordinates for each vertex of the plane, then the following states with the next positions - or just the initial and final positions with a number of steps between them.

I don’t think this is something trivial for someone who never did anything with threejs, but it’s possible. Look at the example I sent and, if you decide to do more research, try threejs mesh geometry deformation. (:

[hofk]

This could possibly also serve as a starting point:

From the Collection of examples from discourse.threejs.org

2018
eXtended eXamples

The package is packed using outdated geometry, but it is about the process of changing points in their location.

---

Here is the current BufferGeometry

---

A simple fold

2021 discourse.threejs.hofk.de