I’m trying to add a paper unrolling effect to my contact form, but I’m hitting a wall. Saw something similar done with Three.js and shaders on Image Unroll Effects with Three.js | Codrops (tympanus.net) and wanted to recreate that smooth scrolling/unrolling look for my form.
The idea is for a contact form to scroll up and unfurl like paper when submitted. I think it would be a really polished, interactive touch. But I can’t nail the right animation - tried both CSS and ThreeJS approaches.
Anyone have experience with this type of UI element? Would really appreciate any advice or resources you can share. Even a nudge in the right direction would be huge.
You’ll have a hard, if not impossible time getting actual html elements part of a form to behave this way, one way might be to use a tool like html2canvas that would turn the entire form into a canvas image which you could then use as a CanvasTexture as the source texture for the rolled plane, you would then have to manage the switch between the html form being displayed to it being hidden and instead presenting the three js copy to then run the “roll” animation function on…
Yes that’s exactly what I had in mind. But I’m struggling to figure out how to make the rolled plane itself. Is there any easy or straightforward way to do that?