Animated Props
Moving an Element
Example of how to Moving an Element with frame motion.
Move Element
move-element.tsx
import MoveElement from '@/components/animations/move-element' import React from 'react' const AnimatedProps = () => { return ( <div className="p-5"> <MoveElement refresh animate={100} initial={-100} duration={1}> <div className='w-52 h-52 mobile:w-24 mobile:h-24 rounded-md from-purple-500 to-pink-500 bg-gradient-to-r'></div> </MoveElement> </div> ) } export default AnimatedProps "use client" import React, { useState } from 'react' import { Preview } from '../common/display'; import { motion } from "framer-motion"; interface MoveElementProps{ children: React.ReactNode; initial: number; animate:number; duration:number; refresh:boolean; } const MoveElement = ({ children, animate, duration, initial, refresh }: MoveElementProps) => { const [count, setCount] = useState(0); return ( <Preview SetCount={setCount} isRefreshing={refresh} animeName='Move Element'> <motion.div key={count} initial={{ x: initial }} animate={{ x: animate }} transition={{ duration: duration}} > {children} </motion.div> </Preview> ) } export default MoveElement 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> ) };