CMS Image Comparison

Before / After image slider

Eliminate extra clicks using hover-driven split controls for a simpler user experience, paired with a subtle scroll peek that draws the eye and encourages interaction. SEO optimized with Framer CMS and custom cursor support.

FEATURES

• Full Framer CMS Integration. Bind foreground/background images and alt text directly to dynamic CMS collection fields.

• Fully Accessible & Touch Ready. Built in touch action overrides, pointer event management, and dynamic alt text props.

• Hover Interaction & Snap to Center. Control the split position on pointer hover with optional auto-return to center on mouse leave.

• Auto-Reveal on Scroll. Trigger an automated peek animation when component scrolls into view, with configurable duration, delay, and repeat settings.

• Custom Skew Angle. Apply angled split masks across both horizontal and vertical axes without distorting image aspect ratios.

• 3D Parallax Depth. Add subtle interactive tilt and depth scale on mouse hover.

• Soft Edge Feathering. Blend comparison layers seamlessly using custom mask feathering instead of a hard cut line.

TAGS

Image Comparison Before After Before After Slider Compare Images Image Slider Visual Comparison Parallax Auto Reveal