Gsap Mask

gsap-mask.markdown

Gsap Mask

A Pen by Igor on CodePen.

License.

index.html

<div class="bg position-relative pb-5">
  <div class="content">
    <div class="container">
      <div class="row justify-content-center align-items-center min-vh-100">
        <div class="col-12 col-md-10 col-lg-8">
          <p class="display-3 fw-bold text-center">
            Have you ever noticed that cats have a peculiar fascination with keyboards?
          </p>
        </div>
      </div>
      <div class="row justify-content-center align-items-center min-vh-100">
        <div class="col-12 col-md-10 col-lg-8">
          <p class="display-3 fw-bold text-center">
            Do not share this information with anyone
          </p>
        </div>
      </div>
      <div class="text-center">
        <a class="d-inline-flex justify-content-center align-items-center p-3" href="#">
          <span>psst discover more</span>
          <i class="btn-icon bi bi-arrow-right-short fs-4"></i>
        </a>
      </div>
    </div>
  </div>
  <div class="hidden-content">
    <div class="container">
      <div class="row justify-content-center align-items-center min-vh-100">
        <div class="col-12 col-md-10 col-lg-8">
          <p class="display-3 fw-bold text-center">
            I am convinced that cats secretly control the Internet.
          </p>
        </div>
      </div>
      <div class="row justify-content-center align-items-center min-vh-100">
        <div class="col-12 col-md-10 col-lg-8">
          <p class="display-3 fw-bold text-center">
            especially not with the cats!
          </p>
        </div>
      </div>
      <div class="text-center">
        <div class="d-inline-flex justify-content-center align-items-center p-3">
          <span>psst discover more</span>
          <i class="btn-icon bi bi-arrow-right-short fs-4"></i>
        </div>
      </div>
    </div>
  </div>
</div>

script.js

console.clear();
const content = document.querySelector(".content");
const link = document.querySelector("a");
const linkIcon = document.querySelector(".btn-icon");
let linkAnimated = false;

let xTo = gsap.quickTo(".hidden-content", "--x", {
    duration: 0.4,
    ease: "power4.out"
  }),
  yTo = gsap.quickTo(".hidden-content", "--y", {
    duration: 0.4,
    ease: "power4.out"
  });

let tl = gsap.timeline({ paused: true });
tl.to(".hidden-content", {
  "--size": 250,
  duration: 0.75,
  ease: "back.out(1.7)"
});

let hoveringContent = gsap.utils.toArray("p", content);

hoveringContent.forEach((el) => {
  el.addEventListener("mouseenter", () => {
    tl.restart();
  });
  el.addEventListener("mouseleave", () => {
    tl.reverse();
  });
});

/***************************************
              Btn Hovering
***************************************/
let btnTl = gsap.timeline({ paused: true });
btnTl.to(".hidden-content", {
  "--size": 20,
  duration: 0.75,
  ease: "back.out(1.7)"
});

link.addEventListener("mouseenter", (e) => {
  linkAnimated = true;
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

  let iconRect = linkIcon.getBoundingClientRect();
  let centerX = iconRect.left + iconRect.width / 2;
  let centerY = iconRect.top + iconRect.height / 2 + scrollTop;

  yTo(centerY);
  xTo(centerX);
  btnTl.restart();
});

link.addEventListener("mouseleave", (e) => {
  linkAnimated = false;
  btnTl.reverse();
});

/***************************************
    Add Mask on First Mouse Movement
***************************************/
window.addEventListener("mousemove", onFirstMove);

function onFirstMove(e) {
  window.removeEventListener("mousemove", onFirstMove);
  gsap.set(".hidden-content", { autoAlpha: 1, "--x": e.pageX, "--y": e.pageY });

  window.addEventListener("mousemove", (e) => {
    if (!linkAnimated) {
      yTo(e.pageY);
      xTo(e.pageX);
    }
  });
}

scripts

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>

style.css

:root {
  --bg: #121212;
}

a {
  color: white;
  text-decoration: none;
}

a:hover {
  color: white;
}

.bg {
  background-color: var(--bg);
}

p {
  text-transform: uppercase;
  font-weight: bold;
}

.content p {
  background: -webkit-linear-gradient(45deg, #fa9b8b 0%, #f27481 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hidden-content {
  --x: 0px;
  --y: 0px;
  --size: 5px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgb(251, 156, 132);
  background: -moz-linear-gradient(
    180deg,
    rgba(251, 156, 132, 1) 0%,
    rgba(240, 102, 128, 1) 50%,
    rgba(129, 36, 112, 1) 100%
  );
  background: -webkit-linear-gradient(
    180deg,
    rgba(251, 156, 132, 1) 0%,
    rgba(240, 102, 128, 1) 50%,
    rgba(129, 36, 112, 1) 100%
  );
  background: linear-gradient(
    180deg,
    rgba(251, 156, 132, 1) 0%,
    rgba(240, 102, 128, 1) 50%,
    rgba(129, 36, 112, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fb9c84",endColorstr="#812470",GradientType=1);
  color: var(--bg);
  --mask: radial-gradient(
    circle at var(--x) var(--y),
    black var(--size),
    transparent 0
  );
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  pointer-events: none;
  visibility: hidden;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />