https://github.com/lucasfloriani/use-step-animation

https://github.com/lucasfloriani/use-step-animation

Last synced: 15 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/lucasfloriani/use-step-animation
• Owner: lucasfloriani
• License: mit
• Created: 2022-01-03T01:43:21.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-11-04T23:02:30.000Z (over 1 year ago)
• Last Synced: 2024-04-22T03:05:42.642Z (2 months ago)
• Language: TypeScript
• Homepage: https://lucasfloriani.github.io/use-step-animation/
• Size: 1.7 MB
• Stars: 11
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Lists

• my-awesome-stars - lucasfloriani/use-step-animation - (TypeScript)

README

        
# use-step-animation

> Custom hook used to make sequence of animations using positions more easily

[![NPM](https://img.shields.io/npm/v/use-step-animation.svg)](https://www.npmjs.com/package/use-step-animation)

## Install

```bash

npm install use-step-animation

yarn add use-step-animation

```

## Usage

```tsx

import * as React from "react";

import { animated } from "react-spring";

import { useStepAnimation } from "use-step-animation";

const Example = () => {

  const wrapperRef = React.useRef();

  const stepOneRef = React.useRef();

  const stepTwoRef = React.useRef();

  const stepThreeRef = React.useRef();

  const stepFourRef = React.useRef();

  const stepFiveRef = React.useRef();

  const { animationProps, step, nextStep, previousStep } = useStepAnimation({

    wrapperRef,

    stepsRef: [stepOneRef, stepTwoRef, stepThreeRef, stepFourRef, stepFiveRef],

    offset: { x: 0, y: 0 },

    queueTime: 1000,

    getPositionsAwaitTime: 0,

  });

  return (

    

      

        


          

            Previous

          

          

            Next

          

        

      

      

        


          

            {step + 1}

          

          


            1

          

          


            2

          

          


            3

          

          


            4

          

          


            5

          

        

      

    

  );

};

```


## License

MIT © [lucasfloriani](https://github.com/lucasfloriani)