https://github.com/animatable-js/animatable_jsx

This extension package of animatable-js allows for easy and lightweight implementation of linear or curved animations in a JSX/TSX environment.
https://github.com/animatable-js/animatable_jsx

animatable-js jsx react

Last synced: 25 days ago
JSON representation

This extension package of animatable-js allows for easy and lightweight implementation of linear or curved animations in a JSX/TSX environment.

• Host: GitHub
• URL: https://github.com/animatable-js/animatable_jsx
• Owner: animatable-js
• License: mit
• Created: 2024-09-04T10:14:56.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-05T03:56:16.000Z (2 months ago)
• Last Synced: 2024-09-29T06:23:38.065Z (about 1 month ago)
• Topics: animatable-js, jsx, react
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/animatable-jsx
• Size: 304 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  
Animatable JSX Package

  

        

          

            Version

            v1.0.0-alpha2

          

        

    



# Introduction

This extension package of [animatable-js](https://github.com/animatable-js/animatable_js) allows for easy and lightweight implementation of linear or curved animations in a JSX/TSX environment.

## Install by NPM

To install this package in your project, enter the following command.

> When you want to update this package, enter `npm update animatable-jsx --save` in the terminal to run it.

```

npm install animatable-js, animatable-jsx

```

## How to animate a value to that you want.

This can be resolved using the provided `useAnimation` or `useAnimationController` hooks in this package.

```jsx

export function Root() {

  // is given a current value, an animation instance.

  const [value, animation] = useAnimation(1000);

  useEffect(() => {

      animation.animateTo(1);

  }, []);

  return 
Hello, World! {value}

}

```


## Usage about custom hooks.

The hooks initializes an animation instance and provides an updated animation value over time. It also ensures proper cleanup of the animation when the component is unmounted.

### useAnimation()

A custom hook for handling animations.

```jsx

const [value, instance] =  useAnimation(duration, curve?, initialValue? = 0);

```

### useAnimationController()

A custom hook for handling raw animations.

```jsx

const [value, instance] =  useAnimationController(

  duration,

  lowerValue? = 0,

  upperValue? = 1,

  initialValue? = lowerValue

);

```