A reusable Before / After Comparison Slider that allows users to interactively compare two images. Built with GSAP draggable functionality, this component enhances user engagement by enabling a visual comparison of 'before' and 'after' scenarios.

Key Features:

• Interactive slider functionality using GSAP Draggable for smooth image comparison.
• Customizable bounds for the slider defined by the 'comparison-bounds-percentage' attribute.
• Responsive design that adjusts to different screen sizes using JavaScript for dynamic resizing.
• Easy integration with a simple code snippet to be added before the closing body tag.

Design Elements:

• Clean layout with a focus on image content, allowing for clear visual comparisons.
• Use of inset clipping to reveal the 'after' image as the slider is dragged, creating a dynamic visual effect.
• Minimalistic design that emphasizes the images rather than decorative elements.

Potential Use Cases:

• Real estate websites showcasing property renovations.
• Beauty and skincare brands demonstrating product effectiveness.
• Fitness and health platforms displaying transformation results.
• Automotive sites comparing before and after vehicle modifications.
• Educational platforms illustrating changes over time in scientific experiments.

Conclusion: The Before / After Comparison Slider is an effective tool for visually demonstrating changes, making it suitable for various industries that rely on visual storytelling.