clipped element

A simple display animation from top-left based on clip-path

> COMPONENTS:

> motion.div

> KEYWORDS:

clip-pathscaleappearshowimagetop-left

> SOURCE CODE:


"use client"
import { motion } from "motion/react"

const ClippedElement = () => {
  return (
    <motion.div
      animate={{ clipPath: 'inset(0 0 0 0)', scale: 1 }}
      className="w-40 h-40"
      initial={{ clipPath: 'inset(0 100% 100% 0)', scale: 1.1 }}
    >
      <div className="w-full h-full bg-orange-400 rounded-xl" />
    </motion.div>
  )
}

export default ClippedElement