Interactive Circular Image Carousel using GSAP

Interactive Circular Image Carousel using GSAP

This is a scroll-controlled circular image carousel built with GSAP and vanilla JavaScript.

Images rotate smoothly in a circular path as you scroll, creating an engaging 3D-like effect.

How it works:

• Images are placed in a circular layout around the center of the screen.
• The carousel responds to mouse wheel scrolling to rotate the images smoothly.
• GSAP ticker is used to animate rotation for a smooth experience.
• The carousel is responsive and adapts to window resizing.

Features:

• Fully circular layout with dynamic rotation
• Smooth scrolling control using mouse wheel
• Responsive and adaptive to different screen sizes
• Elegant shadow and 3D depth effect

Demo Setup:

1. Include GSAP library: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js
2. Create a container div for the carousel.
3. Add your images and style them as rounded items with shadows.
4. Use JavaScript to calculate positions in a circular path and animate rotation.
5. Add a scroll event to control rotation and friction to gradually slow down movement.

Code Overview:

• centerX and centerY determine the center of the carousel.
• radius determines the distance of images from the center.
• rotation and velocity control the spinning movement.
• updatePositions() function updates the position of each image in a circular path.
• The carousel recalculates positions on window resize for responsiveness.

This carousel is perfect for portfolio showcases, product displays, or interactive image galleries.