useAnimation Hook
Position Animation
Example of how to use Position animation with frame motion.
Position Animation
position-animation.tsx
import Modal from '@/components/animations/modal' import React from 'react' const Position = () => { return ( <div className="p-5"> <PositionAnimation animate={{ opacity: 1, y: 0 }} initial={{ opacity: 0, y: 500 }}> <div className="w-52 h-52 rounded-full from-orange-500 to-yellow-500 bg-gradient-to-t" /> </PositionAnimation> </div> ) } export default Position "use client" import React, { useEffect, useState } from 'react'; import { Preview } from '../common/display'; import { motion, useAnimation } from "framer-motion"; interface PositionProps { children: React.ReactNode; initial: ControlProps; animate: ControlProps; } interface ControlProps { opacity: number; y: number; } const PositionAnimation = ({ children, animate, initial }: PositionProps) => { const [count, setCount] = useState(0); const controls = useAnimation(); useEffect(() => { controls.start({ opacity: animate.opacity, y: animate.y }); }, []); return ( <Preview SetCount={setCount} isRefreshing={true} hideIcon animeName='Position Animation'> <motion.div key={count} animate={controls} initial={{ opacity: initial.opacity, y: initial.y }}> {children} </motion.div> </Preview> ); } export default PositionAnimation; interface PreviewerProps { children: React.ReactNode; SetCount: (count: number) => void; isRefreshing: boolean; animeName:string hideIcon?: boolean; } export const Preview = ({ children, SetCount, isRefreshing, animeName, hideIcon=false }: PreviewerProps) => { const [count, setCount] = useState(0); const [isLoading, setIsLoading] = useState(false); const handleClick = () => { setIsLoading(true); setCount(count + 1); SetCount(count + 1); setTimeout(() => { setIsLoading(false); }, 400); // Timeout duration matches the animation duration }; return ( <div className="w-full h-full flex flex-col"> <div className="w-full flex-1 flex justify-center items-center"> {children} </div> {isRefreshing && <div className="h-[50px] w-full px-6 rounded-b-[24px] flex justify-between"> <span>{animeName}</span>{!hideIcon && <RotateCw onClick={handleClick} className={isLoading ? 'animate-spin duration-200' : 'animate-none'} />} </div> } </div> ) };