Animate

X:0

Y:0

Border Radius:0

Rotate:0


    const [xPos,setXPos] = useState(0)
    const [yPos,setYPos] = useState(0)
    const [borderRadiusValue, setBorderRadiusValue] = useState(0)
    const [rotateValue,setRotateValue] = useState(0)
 
    return(
    <div className="p-2 shadow-inner w-full py-24 shadow-white rounded-lg bg-black/90 ">   
        <motion.div 
        animate={{x:xPos, y:yPos, borderRadius: borderRadiusValue, rotate:rotateValue}}
        className="w-24 bg-white h-24 mx-auto  shadow-md shadow-gray-900">
        </motion.div>
    </div>)
    //      use input:range to play with the values

Entry & Exit Animations

Opacity

Slide

Scale


        const [showBox,setShowBox] = useState(false)
    
        return (
            <Block>
                <AnimatePresence>
                    {showBox&&
                    (<motion.div className="w-24 bg-white h-24 mx-auto  shadow-md shadow-gray-900"        
                    initial={{opacity:0}}   
                    animate={{opacity:1}}
                    exit={{opacity:0}}
                    >
                    </motion.div>)}
                </AnimatePresence>
            </Block>)

            <button onClick={()=>setShowBox(e=>!e)}
            >{showBox?'Hide':'Show'}</button>

Keyframes

Framer-Motion-Doc


    <Block>
        <motion.div 
        animate={{
            x:[0,0,0,0,0,0,0,200],
            rotate:[0,45,360,90,270,0] ,
            scale:[1,.7,1.2,.3,1.9,1],
            borderRadius:[0,10,40,0,50,0]
                }}
        transition={{repeat: Infinity, repeatDelay: 2, duration: 5}}
        className="w-24 bg-white h-24 mx-auto  shadow-md shadow-gray-900">   
        </motion.div>
    </Block>

Gestures

Touch & Hover


    <Block>
        <motion.button className="px-10 p-3 shadow-md text-white  
         text-xl rounded-full bg-gradient-to-br 
         block mx-auto from-sky-500 to to-blue-700"
        whileHover={{scale:1.2,textShadow:'1px 1px 10px skyblue'  
        ,boxShadow:'2px 2px 20px 2px blue'}}
        whileTap={{scale:0.8}}
        >Hover / Tap</motion.button>
    </Block>

Drag


    <Block>
        <motion.div className="h-24 w-24 shadow-md mx-auto 
        text-xl bg-white rounded-lg border-2 border-black"    
        drag
        whileDrag={{scale:0.5}}
        dragSnapToOrigin
        ></motion.div>
    </Block>

Scroll Animations

Scroll Linked

Progress Bar


    const {scrollYProgress} = useScroll()
    return(
        <motion.div 
        style={{scaleX:scrollYProgress}} 
        className="h-2 origin-left fixed right-0 top-0
         left-0 bg-gradient-to-r from-sky-500 to-blue-700 z-50"   
        />
    )

Scroll Triggered


    <Block>
        <div className="w-80 relative flex items-end ">
            <motion.div 
            initial={{y:300,rotate:-12}}
            whileInView={{y:-40,rotate:-12}}
            transition={{duration:.4,type: 'spring' , bounce: 0.5}}
            className="w-60-rotate-12 h-80 bg-white mx-auto rounded-lg"/>
        </div>
    </Block>

Scroll Triggered

Stagger Animations


const parent={
    hidden:{opacity:0},
    visible:{opacity:1,
        transition:{
//you can use these if u want stagger effect on initial stage instead of whileInView  
            // delayChildren:2,
            // staggerChildren:.1
        }},}

const child={
    hidden:{opacity:0},
    pop:(custom)=>({
        opacity:1,
        transition:{
            delay:.04*custom
        }})}

return (
    <Block>
        <motion.div
        className='p-5 rounded-lg bg-white w-max grid grid-cols-2 lg:grid-cols-4 mx-auto'
        variants={parent}
        initial='hidden'
        animate='visible'
        whileInView={'pop'}
        >
            {[1,2,...,16].map((data,i)=><Child key={i} custom={data}/>)}
        </motion.div>
    </Block>
)

Exit Before Enter


        const [count,setCount]=useState(0)
        return(
        <Block>
            <AnimatePresence  exitBeforeEnter={false} >
                <motion.div 
                layout
                className='p-20 rounded-xl bg-gradient-to-br from-sky-500
                to-blue-700 text-white text-9xl font-bold mx-auto w-max'
                initial={{opacity:0.8, scale:1.4}}
                animate={{opacity:1, scale:1}}
                exit={{opacity:0, scale:0.6}}
                key={count}
                >
                    {count}
                </motion.div>
            </AnimatePresence>
        </Block>)

Exit Before Enter

Reorder

🍅 Tomato
🥒 Cucumber
🧀 Cheese
🥬 Lettuce


    const [list,setList]=useState(["🍅 Tomato", "🥒 Cucumber", "🧀 Cheese", "🥬 Lettuce"]) 
    return(
        <Block>
            <Reorder.Group values={list} onReorder={setList}  >
                {list.map((data,i)=>(
                    <Reorder.Item key={data} value={data} >
                        <div>
                            <h1>{data}</h1>
                        </div>
                    </Reorder.Item>))}
            </Reorder.Group>
        </Block>
    )

UseTransform


    const x = useMotionValue(0)
    const background = useTransform(x,[-100,0,100],[color1,color2,color3]) 
    const scale = useTransform(x,[-100,0,100],[1.5,1,1.5],{clamp:false})
    return(
        <Block>
            <motion.div
            drag='x'
            className='w-20 h-20 mx-auto rounded-xl'  
            dragConstraints={{ left: 0, right: 0 }}
            animate={{x:0}}
            style={{x,background,scale}}
            >
            </motion.div>
        </Block>
    )