import { forwardRef, useImperativeHandle, useCallback } from "react"; import type { AnimatedIconHandle, AnimatedIconProps } from "./types"; import { motion, useAnimate } from "motion/react"; const TravelBag = forwardRef( ( { size = 24, color = "currentColor", strokeWidth = 2, className = "" }, ref, ) => { const [scope, animate] = useAnimate(); const start = useCallback(async () => { animate( ".front-flap", { skewX: 20 }, { duration: 0.4, ease: [0.4, 0, 0.2, 1] }, ); animate( ".elements", { x: -1, scale: 0.9, skewX: 20 }, { duration: 0.3, ease: "easeInOut" }, ); animate(".back-flap", { x: 4 }, { duration: 0.3, ease: "easeInOut" }); }, [animate]); const stop = useCallback(() => { animate(".front-flap", { skewX: 0 }, { duration: 0.3, ease: "easeIn" }); animate( ".elements", { x: 0, scale: 1, skewX: 0 }, { duration: 0.3, ease: "easeOut" }, ); animate(".back-flap", { x: 0 }, { duration: 0.3, ease: "easeOut" }); }, [animate]); useImperativeHandle( ref, () => ({ startAnimation: start, stopAnimation: stop, }), [start, stop], ); return ( ); }, ); TravelBag.displayName = "TravelBag"; export default TravelBag;

travel-bag

Installation