DEV Community

Cover image for Clip-Path Circle Reveal Animation With Mouse Movement
plsankar
plsankar

Posted on

Clip-Path Circle Reveal Animation With Mouse Movement

#javascript #webdev #gsap #animation

What’s the Plan?

We’ll create an animation where an image is revealed through a circle that moves with your mouse. You’ll also be able to tweak the size of the circle and experiment with the behavior.

Here’s what you’ll need:

  • GSAP: For buttery-smooth animations.
  • Tweakpane: For a slick UI to adjust the animation on the fly.
  • HTML & CSS: To set up and style the page.

HTML 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Clip-Path Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <img src="https://images.unsplash.com/photo-1696149328298-6e2f257bd45a?q=80&w=2104&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Clip-path animation"> <script src="script.js"></script> </body> </html>
Enter fullscreen mode Exit fullscreen mode

CSS 

body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background: #000; overflow: hidden; } img { width: 100%; height: auto; clip-path: circle(var(--size, 10%) at var(--x, 50%) var(--y, 50%)); transition: clip-path 0.6s; }
Enter fullscreen mode Exit fullscreen mode

JS 

import gsap from "https://esm.sh/gsap"; // Smooth animations const xTo = gsap.quickTo("img", "--x", { duration: 0.6, ease: "power3" }); const yTo = gsap.quickTo("img", "--y", { duration: 0.6, ease: "power3" }); const sizeTo = gsap.quickTo("img", "--size", { duration: 0.6, ease: "power3" }); // Update based on mouse movement window.addEventListener("mousemove", (e) => { xTo((e.clientX / window.innerWidth) * 100); yTo((e.clientY / window.innerHeight) * 100); });
Enter fullscreen mode Exit fullscreen mode

Preview

Top comments (0)