GSAP Newsletter Signup Section with a 3D Paper Fold
Overview
A newsletter signup section for React and Next.js. The form is a sheet of paper: on submit it folds into thirds in CSS 3D, closes into an envelope, takes a seal and flies off the page.
The fold is real folding, not a swap to a picture of an envelope. On submit the sheet is replaced by three identical copies, one for each third, so the text and the typed address fold with the paper. The bottom third comes up, the top third comes down, a flap closes, a seal drops on, and the packet pulls back before it leaves the screen.
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 017 / Gallery
GSAP Scroll Unfolding Card Wheel Portfolio
On Scroll · On Hover · On Click · Mouse Move · On Load
No. 085 / Logos
GSAP Split-Flap Client Logo Wall Section
On Scroll · On Load · On Hover
No. 015 / Gallery
GSAP CSS 3D Folio Card Fan Portfolio
On Scroll · Drag · On Hover · Mouse Move
(02)FAQ
GSAP Newsletter Signup Section with a 3D Paper Fold — FAQ
01How do I connect it to my mailing list?
Pass an onSubmit that sends the address to your provider and returns a promise. The button shows the sending label until it resolves, then the paper folds.
02What happens if the request fails?
Throw or reject from onSubmit. The note stays open, shows errorMessage, shakes once and puts focus back in the field.
03How is the email validated?
The browser's own email check runs, plus a check that the address has a dot after the @. It only catches typing mistakes, so keep validating on your server.
04What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. It uses whatever font your page has, and the demo sets Instrument Serif on the page around it.
05What happens with reduced motion?
The entrance and the fold are skipped. The form is replaced by the confirmation straight away.