Infinite Image Spin

Show Preview
Infinite Image Spin

About Infinite Image Spin

A single-card vertical image carousel that scrolls through your images one at a time — perfect for showcasing icons, logos, avatars, or any visual in a compact, eye-catching space.

Key Features & Capabilities

  • Infinite Loop — Scrolls continuously without visible reset; images cycle seamlessly forever

  • 3D Drum Roll — Optional rotateX tilt + scale depth effect during each scroll step, powered by requestAnimationFrame for buttery 60fps

  • Shuffle Order — Randomize image sequence on each page load for a fresh, dynamic feel

  • Random Stagger — Configurable pause range (min/max) and initial delay create organic, non-robotic timing

  • Auto-Pause — IntersectionObserver stops animation when the card is off-screen, saving CPU

  • High Performance — Direct DOM updates via refs, CSS containment, GPU-composited transforms — zero React re-renders during animation

  • Customizable Card — Border radius, border color, background color, and image height all adjustable from the property panel

Best For

Client logo strips, partner showcases, "trusted by" sections, team avatars, tech-stack badges, product icons, and any compact area where you want to display multiple visuals in a single card.

How to Set Up

  1. Drop the component onto your Framer canvas and resize to your desired card dimensions

  2. Open the property panel and add your images under Images

  3. Set Images Count to choose how many images appear per cycle (2–6)

  4. Adjust Scroll Duration, Pause Min/Max, and Initial Delay Max to fine-tune the rhythm

  5. Toggle Infinite Loop on for seamless continuous scrolling

  6. Optionally enable 3D Effect and tweak Rotate X and Perspective for the drum-roll motion

  7. Style the card with Border Radius, Border Color, and Background Color

Options

Created by AliThemes.com · Powered by Framer