Mouse Interaction Animation In JavaScript – cotton.js

Preview:

Description:

Cotton.JS is a JavaScript library that allows you to create a mouse interaction animation just like floating cotton.

How to use it:

1. Install and import the cotton.js.

# NPM
$ npm i cotton

import Cotton from 'cotton'

2. Or simply load the cotton.js in the document.

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

3. Create an element that you would like to animate.

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

4. Style your element. If you want to make a mouse-following element, you have to set the position 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 done.

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

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

• scene: The animation will work when only the mouse is moving in the scene.
• cottonInitClass: The cottonInitClass will be added when cotton is initialized, and will be removed when you call the stop() method.
• cottonMovingClass: The cottonMovingClass will be added when the mouse enter the scene, and will be removed when the mouse leave the scene. cottonMovingClass will also be removed when you call the stop() method.
• cottonActiveClass: The cottonActiveClass will be added on cotton when mouse enter the models, and will be removed mouse leave the models.
• models: Define the elements that you want your cotton to interact with.
• modelsActiveClass: The modelsActiveClass will be added on model when mouse enter the model, and will be removed mouse leave the model.
• mouseCenter: Center the mouse or not.
• speed: The lower the number, the greater the delay. The speed property must be > 0 and <= 1. If this parameter is not specified, it will be set to default.
• airMode: By default, the cotton element will relative to the top left of the window when doing the transform. If set to true, then cotton will do the transform relative to its own center point. And the following properties will be set automatically. In airMode, the transform value will not increase if cotton is not in viewport.
• airMode.resistance: The higher the number, the less the transform. The resistance property must be >= 1 and <= 100. If this parameter is not specified, it will be set to default. If set to 1, cotton will follow the mouse completely.
• airMode.reverse: By default, the airMode cotton will move forward to the mouse. If set to true, the airMode cotton will move backward to the mouse.

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 methods.

// 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();

8. Callback functions.

const cottonCursor = new Cotton('#cotton-cursor',{
      on: {
        enterModel: null,
        leaveModel: null,
        enterScene: null,
        leaveScene: null
      }
})

Changelog:

v1.3.6 (11/26/2021)

• bugfix

v1.3.3 (11/10/2021)

• fix airMode bug

v1.3.2 (11/04/2021)

• fix airMode bug

v1.2.0 (06/24/2021)

• fixed userAgent detect on iPad

06/04/2021

• support to declare targets using querySelector

05/16/2021

• Bugfix

05/13/2021

• add mouseCenter parameter