GSAP Slide to Confirm Call to Action Section
Overview
A call to action section for React and Next.js you drag instead of click. As the handle crosses the track, a new colour wipes over the whole section and flips the type exactly along its edge. Let go early and it springs back.
A button is easy to ignore. This asks for a small commitment instead, and pays it back: the full section changes colour under your finger as you drag, with the headline switching colour exactly along the moving edge. Past 82% of the track, letting go confirms and the headline swaps. Before that, the handle springs back.
Details
- Category
- CTA
- Interaction
- Drag + On Click + On Scroll
- Trigger
- Drag
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 048 / CTA
GSAP Call to Action Section with Hover Colour Flood
On Hover · 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. 088 / Testimonials
GSAP Testimonials Section with Auto-Advancing Quotes
On Load · On Click · On Hover · On Scroll
(02)FAQ
GSAP Slide to Confirm Call to Action Section — FAQ
01What happens when someone confirms?
Your onConfirm runs, the heading swaps to confirmedHeading and confirmedAction appears. Pass a booking link there, or send people on from onConfirm.
02Can people use it without dragging?
Yes. Tab to the handle and press Enter. A plain mouse click gives a short hint instead, since the drag is the point of the section.
03How do I change the colours?
color and ink set the section at rest, fill and fillInk set the colours that wipe across. Pick a fill that contrasts strongly with color, or the wipe won't read.
04Can I change how far you need to drag?
Change THRESHOLD at the top of the file. It's 0.82 by default, a share of the track.
05What happens with reduced motion?
Dragging still works and the wipe still follows it, because the visitor is moving it themselves. The nudges, the spring and the heading animations are removed.