Cotton.JS is a JavaScript library that allows you to make a mouse interaction animation easily.

Getting Started

Download

npm install cottonjs

Manual download

Download ZIP

Installation

ES modules

import Cotton.JS in your own project :

import Cotton from 'cottonjs'

Script tag include

Simply download and include with a script tag :

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

or using CDN :

<script src="https://cdn.jsdelivr.net/gh/cotton123236/cottonjs@latest/lib/cotton.min.js"></script>

Basic Usage

HTML

Create an element that you would like to animate.

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

CSS

Style your element.

There is some rules that you need to notice.

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

JavaScript

Initialize Cotton in JavaScript.

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

See some demos.

Documentation

Parameters

Knowing more details about these parameters.

All available parameters :

const cottonCursor = new Cotton('#cotton-cursor', {
    scene: 'body',  // element
    models: '.cotton-model',  //elements
    cottonInitClass: 'cotton-init',
    cottonMovingClass: 'cotton-moving',
    cottonActiveClass: 'cotton-active',
    modelsActiveClass: 'model-active',
    speed: 0.125,
    centerMouse: true,
    airMode: {
        resistance: 15,
        reverse: false,
        alive: false
    }
})

Methods

Knowing more details about these methods.

All available methods :

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

// call the method after initialization.
cotton.stop()
cotton.move()
cotton.updateModels()

// call the method in callbacks
const cotton = new Cotton('#cotton-cursor', {
    on: {
        enterModel() {
            this.stop()
            this.move()
            this.updateModels()
        }
    }
})

Callbacks

Knowing more details about these callbacks.

All available callbacks :

const cotton = new Cotton('#cotton-cursor', {
    on: {
        // callbacks defined on here.
        enterModel(cotton, model, event) {},
        leaveModel(cotton, model, event) {},
        enterScene(cotton, scene, event) {},
        leaveScene(cotton, scene, event) {},
        cottonMove(cotton, event) {}
    }
})

Mobile Device

Because there is no mouse on mobile devices, Cotton.JS will automatically detect user device and won't initialize when using mobile.

Others

• Visit the website
• Released under the MIT License.
• ©2021 cotton123236