yoannchb-pro / cattract

Animate anything just like it was attracted by the cursor

Cattract

Animate anything just like it was attracted by the cursor

Demo

Demo on the github page

Install

For nodejs

$ npm i @yoannchb/cattract

Or with the cdn

<script src="https://unpkg.com/@yoannchb/[email protected]/dist/index.js"></script>

Import

import Cattract from "cattract";
//Or
const Cattract = require("cattract");

Api

const animation = new Cattract(document.querySelector("#button"));

Or with specified options

const animation = new Cattract(document.querySelector("#button"), {
  //options you need
});

Method

• animation.stop() stop the animation
• animation.start() Start the animation after a stop
• animation.reset() Reset the target style
• animation.debug(color: string = "#e1e1e130") Create two circle around the target to see the elementRadius and detectionRadius

Options

type With3dOptions = {
  axe?: "x" | "y";
  inverted?: boolean | "x" | "y";
  maxAngle?: number;
  perspective?: number;
};

type Options = {
  elementRadius?: number;
  detectionRadius?: number | "full";
  animation?: {
    ease?: string;
    duration?: number;
  };
  scale?: {
    from?: number;
    to?: number;
    animated?: boolean;
  };
  inverted?: boolean | "x" | "y";
  axe?: "x" | "y";
  with_3d?: boolean | With3dOptions;
};