Contact me

Day: November 6, 2025

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: Include GSAP library: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js Create a container div for the carousel. Add your images and style them as rounded items with shadows. Use JavaScript to calculate positions in a circular path and animate rotation. 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.

This is a circular, scroll-controlled image carousel built with GSAP and vanilla JavaScript. Images rotate smoothly in a circular path as you scroll, creating an engaging 3D-like effect.