https://github.com/vuquangpham/smooth.js

Animating on a DOM element through Javascript 🎇🎉
https://github.com/vuquangpham/smooth.js

animation fe-lib javascript transition

Last synced: about 1 month ago
JSON representation

Animating on a DOM element through Javascript 🎇🎉

• Host: GitHub
• URL: https://github.com/vuquangpham/smooth.js
• Owner: vuquangpham
• License: mit
• Created: 2023-05-29T14:21:13.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-07-21T14:45:19.000Z (over 1 year ago)
• Last Synced: 2024-10-15T08:49:09.110Z (3 months ago)
• Topics: animation, fe-lib, javascript, transition
• Language: JavaScript
• Homepage: https://smoothjs.netlify.app/
• Size: 3.65 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Smooth.js

> Creating custom transition or complex animation with Javascript 🌊

## Getting started

### Download

👉 Self hosted -

### Initialize

#### Options

| Name       | Default | Description                               |

|------------|---------|-------------------------------------------|

| `id`       | unique  | Id for clarifying/getting instance.       |

| `timing`   | linear  | Default timing function.                  |

| `duration` | 300     | Duration of the animation in millisecond. |

### Instance

| Name      | Description                     |

|-----------|---------------------------------|

| `destroy` | destroy the transition instance |

#### Timing Functions

Built-in timing functions

| Name     | Description |

|----------|-------------|

| `linear` |             |

#### Events

| Name                    | Description |

|-------------------------|-------------|

| `onUpdate:(self) => {}` |             |

#### Usage

With custom timing function. You can find more timing functions [here](https://gizma.com/easing/).

```js

Smooth.create({

    id: 'smooth', // string

    timing: 'linear', // boolean (true), string, function

    duration: 300, // number

    destroyWhenCompleted: false, // boolean

    customTimeFraction: undefined, // object {value: timeFraction}

    onUpdate: (self) => {

    }

});

```

## Deployment

Run `./public` in live server

```shell

npm run dev

```

Build files from `./src` to `./dist` for production

```shell

npm run prod

```

Build files from `./src` and `./dev` to `./dist` for deploying site

```shell

npm run build

```