Image Fold

A physical texture reveal driven by WebGL cylinder deformation rather than flat masks. Scrolling or page load unfurls the visual along an organic 3D curve, curling edges with genuine spatial depth, adjustable bend radiuses, and dynamic surface shading that tracks the motion path.

Image Fold

CategoryScroll

TagThree.js, GSAP, ScrollTrigger, 3D, Scroll, WebGL

Guide: How to UseView Guide

API References

Prop	Type	Default
image	Image URL displayed within the folding scroll container	Unsplash URL
angle	Directional orientation angle for the unrolling fold (0° – 360°)	175
rolls	Number of spiral curvature loops inside the cylinder fold (1 – 20)	14
rollRadius	Cylindrical curvature radius of the paper fold	4
mode	Trigger mechanism for unrolling animation ('enter' or 'default')	'enter'
startAlign	Scroll trigger threshold relative to viewport position ('top' \| 'center' \| 'bottom')	'center'
replay	Whether to replay the unrolling animation when re-entering viewport	false
duration	Duration of the paper unrolling animation in seconds	2