search

Home >Web Front-end >JS Tutorial >Clip-Path Circle Reveal Animation With Mouse Movement

Clip-Path Circle Reveal Animation With Mouse Movement

Linda Hamilton
Linda HamiltonOriginal
2024-12-14 00:42:11667browse

Clip-Path Circle Reveal Animation With Mouse Movement

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>

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;
}

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);
});

Preview

The above is the detailed content of Clip-Path Circle Reveal Animation With Mouse Movement. For more information, please follow other related articles on the PHP Chinese website!

css html for JS animation ui
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Arrow Functions in ES6: Parentheses or Curly Braces – When to Use Which?Next article：Arrow Functions in ES6: Parentheses or Curly Braces – When to Use Which?

Related articles

See more