Press "Enter" to skip to content

A Javascript Library To Animate Frames From Sprite Image Plugin

animate-sprite is a lightweight (5.5KB minified) library that allows you to animate a series of frames that appear to be 3D. It supports full animation sequence playback, mouse and touch image rotation, autoplay, loop, and reverse, and displays an API to programmatically control animations.

3d product viewer, 360 degree product viewer, free 360 product viewer, 360 degree product view html5, 360 product viewer open source, 360 product viewer software plugin

Features:

  • Interact with drag, mouse movement, and touch events.
  • Infinite loop and autoplay.
  • Responsive, mobile-friendly design.

How to make use of it:

1. Install and download the package using NPM.

# NPM
$ npm @its2easy/animate-sprite --save

2. Import the animated object into your document.

<script src="/path/to/build/animate-sprite.min.js"></script>

3. Create a placeholder for the image viewer.

<div id="sprite-example" class="sprite sprite-example"></div>

4. Enter the product image as the background for the image viewer.

.sprite{
  background-image: url("product.jpg");
}

5. Initialize the image viewer and pass the required parameters.

var element = document.getElementById('sprite-example');
var sprite = animateSprite.init(element,
    {
      width: 600, /* required */
      height: 450, /* required */
      frames: 36, /* required */
    }
);

6. Run the image viewer when the page is loaded.

sprite.play();

7. Default options.

var sprite = animateSprite.init(element,
    {
      width: 100,
      height: 100,
      frames: 24,
      cols: false,
      loop: false,
      frameTime: false, // time between frames
      duration: false,
      fps: 24,
      reverse: false, // reverse direction
      autoplay: false,
      draggable: false
    }
);

8. Or pass the options through the HTML data attributes:

<div id="sprite-example" 
     class="sprite sprite-example"
     data-width="600"
     data-heigth="450"
     data-frames="36">
</div>

9. Available API methods to programmatically control the image viewer.

// init
sprite.init(element, options);

// play
sprite.play();

// pause
sprite.pause();

// stop
sprite.stop();

// toggle
sprite.toggle();

// go to the next frame
sprite.next();

// back to the previous frame
sprite.prev();

// reset
sprite.reset();

// destroy
sprite.destroy();

// set a frame without animation
sprite.setFrame(frameIndex);

// reverse the animation
sprite.setReverse(true/false);

// update an option
sprite.setOption(option, value);

// get the current frame index
sprite.getCurrentFrame();

// check if is animating
sprite.isAnimating();

10. Event handlers.

element.addEventListener('sprite:first-frame', function () {
  // first frame
})

element.addEventListener('sprite:last-frame', function () {
  // last frame
})

3D Interactive Product Viewer Based On Sprite Sheet, Animate Sprite Plugin/Github, 3d interactive product demo, 360 product view examples


See Demo And Download

Official Website(its2easy): Click Here

This superior jQuery/javascript plugin is developed by its2easy. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *