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

Last update: Dec 27, 2022

Overview

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.

A library for boolean aliases to help you make your code more confusing and make your coworkers hate you.

yup-nope A library for boolean aliases to help you make your code more confusing and make your coworkers hate you. Installation Using npm: npm install

Dec 10, 2022

An implementation of Interaction Nets in JavaScript.

Interaction Nets An implementation of Interaction Nets in JavaScript. Use S-expression as overall syntax. Use Forth-like postfix stack-based syntax to

Dec 23, 2022

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

lazysizes lazysizes is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images picture/srcset), ifra

Jan 1, 2023