@arwes/react-frames/build/esm/useFrameAssembler/useFrameAssembler.js

Futuristic Sci-Fi UI Web Framework

import { useEffect } from 'react';
import { animateFrameAssembler } from '@arwes/frames';
import { useAnimator } from '@arwes/react-animator';
const useFrameAssembler = (svgRef) => {
    const animator = useAnimator();
    useEffect(() => {
        const container = svgRef.current;
        if (!animator || !container) {
            return;
        }
        let animation;
        const unsubscribe = animator.node.subscribe((node) => {
            switch (node.state) {
                case 'entering': {
                    animation?.cancel();
                    animation = animateFrameAssembler({
                        element: container,
                        duration: node.settings.duration.enter,
                        isEntering: true
                    });
                    break;
                }
                case 'exiting': {
                    animation?.cancel();
                    animation = animateFrameAssembler({
                        element: container,
                        duration: node.settings.duration.exit,
                        isEntering: false
                    });
                    break;
                }
            }
        });
        return () => {
            animation?.cancel();
            unsubscribe();
        };
    }, [animator]);
};
export { useFrameAssembler };