Motion Components
Fade In
Example of how to use FadeIn animation with frame motion.
FadeIn
fade-in.tsx
import FadeIn from "@/components/animations/fade-in"; import React from 'react' const MotionComponents = () => { return ( <div className="p-5"> <FadeIn initial={0} animate={1} duration={1} refresh> <div className="w-52 h-52 rounded-full from-orange-500 to-yellow-500 bg-gradient-to-t" /> </FadeIn> </div> ) } export default MotionComponents "use client" import React, { useState } from 'react'; import { Preview } from '../common/display'; import { motion } from "framer-motion"; interface FadeInProps{ children: React.ReactNode; initial: number; animate:number; duration:number; refresh:boolean; } const FadeIn = ({ children, animate, duration, initial, refresh }:FadeInProps) => { const [count, setCount] = useState(0); return ( <Preview SetCount={setCount} isRefreshing={refresh} animeName='FadeIn'> <motion.div key={count} initial={{ opacity: initial }} animate={{ opacity: animate }} transition={{ duration: duration }} > {children} </motion.div> </Preview> ); }; export default FadeIn; 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> ) };