@soatra/any v2.1.4

Any

Any is a React component library used to create animating components with the help of Tailwind CSS.

Main updates in this version: 1. breakpoints: set breakpoints for duration, delay and easing. 2. after: move to next state while current state is animating. 3. on: handle at a specific point within the animation.

Usage

Default:

import Any from '@soatra/any';
import { Easings } from '@soatra/any/static';

const MyComponent = () => {
    return (
        <>
            <Any
                from="opacity-0"
                to={[
                    {
                        state: 'opacity-100',
                        duration: 1000,
                        easing: Easings.Linear
                    },
                ]}>
                <p>Animation</p>
            </Any>
        </>
    );
}

export default MyComponent;

Using start:

...
import { useState } from 'react';

const MyComponent = () => {
    const [start, setStart] = useState(false);

    return (
        <>
            <Any
                ...
                start={start}
                onStart={() => setStart(true)}>
                ...
            </Any>
        </>
    );
}

...

Loop:

...
    <Any
        ...
        start={start}
        onStart={() => setStart(true)}
        onEnd={() => setStart(false)}>
        ...
    </Any>
...

Multiple to states

...
    <Any
        ...
        to={[
            {
                state: 'opacity-50',
                duration: 1000,
                easing: Easings.Linear
            },
            {
                state: 'opacity-100',
                duration: 1000,
                easing: Easings.Linear
            },
        ]}
        ...>
        ...
    </Any>
...

Properties

-- from:

Type: string

is used to set initial state.

-- to:

Type: To[]

To:\  state: string\  duration: number | DurationValueBreakpoints\  easing: Easing | EasingValueBreakpoints\  delay: number | DelayValueBreakpoints | undefined\  start: boolean | undefined\  after: number | undefined\  on: On | On[] | undefined\  onEnd: (() => void) | undefined

is used to set flow-to states.

-- start:

Type: boolean | undefined

is used to start animation.

-- as:

Type: string | undefined

is used to set tag name for the element.

-- instant:

Type: boolean | undefined

is used to start animation instantly.

-- animatedProperties:

Type: string[] | undefined

is used to set animation properties.

-- mergeConfig:

Type: TailwindMergeType | undefined

is used to set tailwind merging configuration.

-- breakpoints:

Type: Breakpoints | undefined

is used to set window screen size breakpoints.

-- onStart:

Type: (() => void) | undefined

is used to handle when animation is starting.

-- onEnd:

Type: (() => void) | undefined

is used to handle when animation is ending.

-- onEnter:

Type: (() => void) | undefined

is used to handle when element enters the screen.

-- onLeave:

Type: (() => void) | undefined

is used to handle when element leaves the screen.

License

MIT