https://github.com/yoannchb-pro/cattract

Animate anything just like it was attracted by the cursor
https://github.com/yoannchb-pro/cattract

animation attractions circle javascript round typescript

Last synced: 15 days ago
JSON representation

Animate anything just like it was attracted by the cursor

• Host: GitHub
• URL: https://github.com/yoannchb-pro/cattract
• Owner: yoannchb-pro
• License: mit
• Created: 2023-07-17T19:52:08.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-07-26T01:25:20.000Z (over 1 year ago)
• Last Synced: 2024-07-06T04:11:09.871Z (4 months ago)
• Topics: animation, attractions, circle, javascript, round, typescript
• Language: TypeScript
• Homepage:
• Size: 34.2 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Cattract

Animate anything just like it was attracted by the cursor

## Demo

Demo on the [github page](https://yoannchb-pro.github.io/cattract/index.html)

## Install

For nodejs

```

$ npm i @yoannchb/cattract

```

Or with the cdn

```html

```

## Import

```ts

import Cattract from "cattract";

//Or

const Cattract = require("cattract");

```

## Api

```ts

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

```

Or with specified options

```ts

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

```ts

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;

};

```