Torn Paper Transition
A scroll transition between two photos. The first image and its headline tear away from the bottom up, leaving a plain sheet of paper, then the paper tears away the same way onto the second. Fog Reveal swallows the image in atmosphere and Image Dissolve Scroll breaks it into patches; here it rips like a printed page.
One of 105 GSAP components in React, Vue and HTML.
On mobile
Take the free components with you.
In React, Vue and HTML, in your inbox, ready when you're back at your desk.
How it's built.
The first version had a sheet of paper sliding up over the photo, and it read like a cover being pulled across, not like anything tearing. So now the photo itself gets torn away from the bottom up. The edge isn't a fixed shape moving upward, it changes as it climbs, so it creeps up the way a real rip does, with long slanted runs, deep bays and a few loose fibres. A thin pale strip along the edge is what sells it as paper, like the inside of the page showing where it ripped. The headline sits under the same tear, so it goes with the photo instead of fading out on its own.
Past that it's yours. Drop in your two images and headlines, pick the paper and the rim colour, and make the rip calmer or more ragged. The swap happens while the frame is plain paper, so you never see the cut, and you can set how long the paper holds before it tears away onto the second image.
What you'll need.
Install
- GSAP
- ScrollTrigger
- three
Concepts
Attributes, tips, use cases and full code are part of access.
The preview and provenance stay public. Tune-it docs, the data-anm-* attribute table, real-world use cases and the copy-ready code unlock the moment you sign in.
Frequently asked
- Does Torn Paper Transition work with React and Vue?
- Torn Paper Transition ships as React (Next.js included), Vue 3 (Nuxt included), plain HTML/CSS/JS - the same animation in each format. The React version uses the official useGSAP hook with cleanup handled; the Vue version is a real single-file component with <script setup>.
- Do I need GSAP to use Torn Paper Transition?
- Yes. Torn Paper Transition is built on GSAP directly, and GSAP has been 100% free for commercial use, including every plugin, since version 3.13. The component page lists exactly what to install.
- Can I customize Torn Paper Transition without editing code?
- Torn Paper Transition exposes 9 tunable controls in the Customize panel on this page - drag the values, watch the live preview respond, and the code you copy carries your exact settings.
- Is Torn Paper Transition free?
- Torn Paper Transition is part of the Annnimate Library, a paid subscription (from EUR 29/month billed quarterly, or EUR 249/year). The live preview and customization run free on this page; the paste-ready code is for members.
- What if Torn Paper Transition is not right for my project?
- Annnimate comes with a 14-day money-back guarantee. If Torn Paper Transition or the library does not fit your project, reply to your receipt within 14 days for a full refund, no questions asked.
- Can I use Torn Paper Transition in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Torn Paper Transition on as many projects as you build, with no attribution required.
- Does Torn Paper Transition respect prefers-reduced-motion?
- Yes. Every Annnimate component handles prefers-reduced-motion via gsap.matchMedia, so users who opt out of motion get an effectively instant, readable state.
