GSAP Before and After Image Slider for React
Overview
A before and after image comparison slider for React and Next.js. Drag the divider, click anywhere, or use the arrow keys. It sweeps once on scroll to show that it moves, and works left to right or top to bottom.
The top image is clipped along the divider, so nothing resizes while you drag. The first time it scrolls into view the divider sweeps once and stops the moment someone touches it. Corner captions fade as the divider reaches them instead of getting cut in half, and a small scale under the frame reads out the split like an editing monitor.
Details
- Category
- Comparison
- Interaction
- Drag + On Click + On Scroll
- Trigger
- Drag
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 083 / CTA
GSAP Slide to Confirm Call to Action Section
Drag · On Click · On Scroll
No. 029 / Hero
GSAP Magazine Cover Hero with Cut-Out Models and Variable Type
On Load · Mouse Move · On Click · On Scroll
No. 023 / Hero
GSAP Botanical Drink Slider Hero with Pour Preloader
On Load · On Scroll · Drag · Mouse Move · On Click
(02)FAQ
GSAP Before and After Image Slider for React — FAQ
01Do I need two images?
No. Pass the same src twice and put a CSS filter in before.style or after.style, as the demo does. For real retouching work, use two files with the same dimensions so they line up.
02How do I set the size?
Set the frame's shape with frameClassName, such as aspect-[3/2]. Its width follows the parent.
03How do I make it vertical?
Set orientation to vertical. The divider then moves up and down, and the second caption moves to the bottom corner.
04What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. Images load through next/image, so remote sources need to be allowed in your Next.js config.
05What happens with reduced motion?
The intro sweep is skipped and the divider jumps straight to where you put it. Dragging and the keyboard still work.