AnimationLib.jsx

import React, { useState, useEffect, useRef } from "react";
export function createAnimation(frames) {
    let frameTotal = 0;
    frames = frames.map((frame, index) => {
        frame.duration = frame.duration || 0;
        frameTotal += frame.duration;
        return frame;
    }).map(frame => {
        frame.duration /= frameTotal;
        return frame;
    });
    const Animation = function Animation({ children, duration }) {
        var [duration, setDuration] = useState(duration || 1);
        const [currentStylesIndex, setCurrentStylesIndex] = useState(0);
        let current = { ...frames[currentStylesIndex] };
        current.transition = (frames[currentStylesIndex].duration * duration) + "s";
        useEffect(() => {
            if (frames[currentStylesIndex + 1]) {
                setTimeout(() => {
                    setCurrentStylesIndex(currentStylesIndex + 1);
                }, frames[currentStylesIndex].duration * duration * 1000);
            }
        }, [currentStylesIndex])

        delete current.duration;
        return (<div style={current}>
            {children}
        </div>);
    }
    Animation.on = (Component) => {
        return (props) => {
            const [duration, setDuration] = useState(props.duration || 1);
            const [triggered, Trigger] = useState(false);
            const [currentStylesIndex, setCurrentStylesIndex] = useState(0);
            const trigger = (value = 1) => {
                Trigger(true);
                setDuration(value);
            }
            useEffect(() => {
                if (triggered) {
                    setCurrentStylesIndex(currentStylesIndex + 1);

                }
            }, [triggered]);
            let current = { ...frames[currentStylesIndex] };
            if (triggered) {
                current.transition = (frames[currentStylesIndex].duration * duration) + "s";
                if (frames[currentStylesIndex + 1]) {
                    setTimeout(() => {
                        setCurrentStylesIndex(currentStylesIndex + 1);
                    }, frames[currentStylesIndex].duration * duration * 1000);
                }
            }

            delete current.duration;
            return (<div style={current}>
                <Component trigger={trigger} {...props}></Component>
            </div>);
        }
    }
    return Animation;
}