SpinIt.js

A lightweight, high-performance JavaScript library for 360-degree image rotation. Perfect for product displays and interactive image viewers.

Explore the Live Demo Showcase

Features

• No Dependencies: No external libraries required.
• Lightweight: Minimal overhead and fast loading.
• Responsive: Adapts to various screen sizes.
• Interactive: Support for mouse and touch interactions.
• Configurable: Easy to customize sensitivity, responsiveness, and more.
• Preload: Number of initial images to load before making the viewer interactive. Other images fetch in the background.

Installation

Via npm

npm install spinit-js

Quick Start

1. Prepare your container:

<div id="spinit-container" style="width: 100%; height: 500px;"></div>

2. Initialize SpinIt:

import { SpinIT } from "spinit-js";

// container, [urlTemplate, startFrame, endFrame], options
const spinit = new SpinIT("#spinit-container", ["img_##.jpg", 1, 90], {
    loop: true,
    inertia: true,
    friction: 0.95,
    sensitivity: 1.0,
    velocityScale: 1.0,
    responsive: true,
    preload: "all",
    autoplay: true,
    autoplaySpeed: 24
});

Options

Option	Type	Default	Description
loop	Boolean	true	Whether the animation should loop when reaching the first or last frame.
inertia	Boolean	true	Enables smooth deceleration after the user stops dragging.
friction	Number	0.95	Controls how quickly the inertia slows down. (0 to 1)
sensitivity	Number	1.0	Adjusts rotation speed. Lower values increase sensitivity (faster rotation).
velocityScale	Number	1.0	Multiplier for the initial inertia velocity.
responsive	Boolean	true	Automatically resizes the canvas to match its container.
preload	Number | "all"	"all"	Number of initial images to load before making the viewer interactive. Other images fetch in the background.
autoplay	Boolean | Number	true	If true, spins automatically until user interaction. If a number, auto-spins until that frame index.
autoplaySpeed	Number	24	Autoplay speed in Frames Per Second (FPS).
debug	Boolean	false	Enables debug mode.
lazyload	Boolean	true	Enables lazy load the SpinIT container.

License

This project is licensed under the MIT License - see the LICENSE file for details.