How to make use of it:

1. Install and import the cotton.js.

# NPM
$ npm i cotton

import Cotton from 'cotton'

2. Or simply load the cotton.js within the doc.

<script src="cotton.js"></script>

3. Create a component that you just want to animate.

<div id="#cotton-cursor"></div>

4. Style your aspect. If you want to make a mouse-following aspect, you must set the place property as fixed.

#cotton-cursor {
  position: fixed;
  z-index: 9;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  pointer-events: none;
  background-color: #f9cabc;
  transform: translate(-20px, -20px);
}

5. Initialize the Cotton and executed.

const cottonCursor = new Cotton('#cotton-cursor')

6. Available choices to customize the mouse-follow animation.

const cottonCursor = new Cotton('#cotton-cursor',{
      data: {
        mouseX: null,
        mouseY: null,
        distanceX: null,
        distanceY: null,
        x: null,
        y: null,
        dx: null,
        dy: null,
        animationFrame: undefined
      },
      scene: 'body',
      conttonInitClass: 'cotton-init',
      cottonMovingClass: 'cotton-moving',
      cottonActiveClass: 'cotton-active',
      models: '.cotton-model',
      modelsActiveClass: 'model-active',
      speed: 0.125,
      airMode: false,
      on: {
        modelEnter: null,
        modelLeave: null
      }
})

7. API strategies.

// Cancel the animation immediately.
// The cotton element will not interact with the mouse.
// And the cottonInitClass will be removed when you call this method.
cottonCursor.stop();

// Restart the animation.
// And the cottonInitClass will be added again when you call this method.
cottonCursor.move();

// This method will update the nodelist of models and also bind the callbacks that you defined automatically.
// It is very useful when you append new models or use AJAX.
cottonCursor.updateModels();

Mouse Interaction Animation, cotton.js Plugin/Github, website animation effects, mouse pointer animation

See Demo And Download