Minion Eye-Tracker Animation

An interactive Minion animation where the Minion’s pupils follow your mouse cursor in real time. Built with HTML, CSS, and JavaScript, this snippet demonstrates dynamic DOM manipulation, CSS styling, and smooth eye-tracking animation for fun and educational purposes. Perfect for learning interactive animations or adding a playful touch to a webpage.

html, css, js

Nov 13, 2025 By Valon Tahiri

<div class="container">
  <div class="minion">
    <ul class="hair back">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <div class="minion-body">
      <div class="dungarees-bottom"></div>
      <div class="dungarees-front"></div>
      <div class="dungarees-pocket">
        <div class="logo"><span></span></div>
      </div>
      <div class="dungarees-strap left">
        <div class="button"></div>
      </div>
      <div class="dungarees-strap right">
        <div class="button"></div>
      </div>
    </div>
    <ul class="hair front">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <div class="goggle-strap left"></div>
    <div class="goggle-strap right"></div>
    <div class="goggle-strap-link left"></div>
    <div class="goggle-strap-link right"></div>
    <div class="goggle-frame left">
      <div class="goggle">
        <div class="eye">
          <div class="pupil">
            <div class="dot"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="goggle-frame right">
      <div class="goggle">
        <div class="eye">
          <div class="pupil">
            <div class="dot"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="goggle-shadow left"></div>
    <div class="goggle-shadow right"></div>
    <div class="mouth"></div>
    <div class="arm-shadow left"></div>
    <div class="arm-shadow right"></div>
    <div class="arm left"></div>
    <div class="arm right"></div>
    <div class="glove left">
      <div class="finger"></div>
    </div>
    <div class="glove right">
      <div class="finger"></div>
    </div>
    <div class="wrist front left"></div>
    <div class="wrist front right"></div>
    <div class="wrist back left"></div>
    <div class="wrist back right"></div>
    <div class="leg left"></div>
    <div class="leg right"></div>
    <div class="shoe left"></div>
    <div class="shoe right"></div>
    <div class="shadow"></div>
  </div>
</div>

<style>
  :before, :after {
    content: "";
    position: absolute;
  }
  .container {
    max-width: 550px;
    padding: 0;
    margin: 0 auto;
    min-height: 450px;
    display: inline;
    perspective: 800px;
    perspective-origin: 50% 50%;
   
  }
  .minion {
    position: absolute;
    top: calc(48% - (250px / 2));
    left: calc(50% - (140px / 2));
    height: 250px;
    width: 140px;
  }
  .minion * {
    position: absolute;
  }
  .minion .hair {
    top: -15px;
    margin: 0;
    padding: 0;
  }
  .minion .hair.back li:nth-of-type(1) {
    transform: rotate(-70deg);
    margin-top: 36px;
  }
  .minion .hair.back li:nth-of-type(2) {
    transform: rotate(-50deg);
    margin-top: 19px;
  }
  .minion .hair.back li:nth-of-type(3) {
    transform: rotate(-30deg);
    margin-top: 12px;
  }
  .minion .hair.back li:nth-of-type(4) {
    transform: rotate(-10deg);
    margin-top: 3px;
  }
  .minion .hair.back li:nth-of-type(5) {
    transform: rotate(2deg);
    border-left: 1px solid #333;
    border-radius: 80% 0 0 0;
  }
  .minion .hair.back li:nth-of-type(6) {
    transform: rotate(10deg);
    margin-top: 3px;
  }
  .minion .hair.back li:nth-of-type(7) {
    transform: rotate(30deg);
    margin-top: 12px;
  }
  .minion .hair.back li:nth-of-type(8) {
    transform: rotate(50deg);
    margin-top: 19px;
  }
  .minion .hair.back li:nth-of-type(9) {
    transform: rotate(70deg);
    margin-top: 36px;
  }
  .minion .hair.front {
    margin-top: 3px;
    z-index: 4;
  }
  .minion .hair.front li:nth-of-type(1) {
    transform: rotate(-60deg);
    margin-top: 21px;
  }
  .minion .hair.front li:nth-of-type(2) {
    transform: rotate(-46deg);
    margin-top: 12px;
  }
  .minion .hair.front li:nth-of-type(3) {
    transform: rotate(-28deg);
    margin-top: 7px;
  }
  .minion .hair.front li:nth-of-type(4) {
    transform: rotate(-12deg);
    margin-top: 5px;
  }
  .minion .hair.front li:nth-of-type(5) {
    transform: rotate(-2deg);
    border-right: 1px solid #333;
    border-radius: 0 80% 0 0;
    margin-top: 3px;
  }
  .minion .hair.front li:nth-of-type(6) {
    transform: rotate(12deg);
    margin-top: 6px;
  }
  .minion .hair.front li:nth-of-type(7) {
    transform: rotate(28deg);
    margin-top: 7px;
  }
  .minion .hair.front li:nth-of-type(8) {
    transform: rotate(46deg);
    margin-top: 12px;
  }
  .minion .hair.front li:nth-of-type(9) {
    transform: rotate(60deg);
    margin-top: 21px;
  }
  .minion .hair li {
    list-style: none;
    height: 30px;
    width: 10px;
    float: left;
  }
  .minion .hair li:nth-of-type(1) {
    transform: rotate(-70deg);
    position: absolute;
    left: 8px;
    height: 30px;
  }
  .minion .hair li:nth-of-type(2) {
    transform: rotate(-50deg);
    left: 18px;
  }
  .minion .hair li:nth-of-type(3) {
    transform: rotate(-30deg);
    left: 30px;
  }
  .minion .hair li:nth-of-type(4) {
    transform: rotate(-10deg);
    left: 45px;
  }
  .minion .hair li:nth-of-type(5) {
    left: 60px;
  }
  .minion .hair li:nth-of-type(6) {
    transform: rotate(10deg);
    left: 76px;
  }
  .minion .hair li:nth-of-type(7) {
    transform: rotate(30deg);
    left: 93px;
  }
  .minion .hair li:nth-of-type(8) {
    transform: rotate(50deg);
    left: 107px;
  }
  .minion .hair li:nth-of-type(9) {
    transform: rotate(70deg);
    left: 119px;
    height: 30px;
  }
  .minion .hair li:nth-of-type(n+6) {
    border-left: 1px solid #333;
    border-radius: 80% 0 0 0;
  }
  .minion .hair li:nth-of-type(-n+4) {
    border-right: 1px solid #333;
    border-radius: 0 80% 0 0;
  }
  .minion .minion-body {
    position: relative;
    height: 250px;
    width: 140px;
    border-radius: 80px 80px 50px 50px;
    background: #ffcb4f;
    overflow: hidden;
  }
  .minion .minion-body:after, .minion .minion-body:before {
    top: 0;
    left: 0;
  }
  .minion .minion-body:before {
    width: 80%;
    height: 100%;
    border-radius: 20px;
    background-image: radial-gradient(rgba(250, 250, 250, 0.6) 0%, rgba(250, 250, 250, 0) 60%);
    filter: blur(5px);
    z-index: 1;
    left: -10px;
  }
  .minion .minion-body:after {
    height: 250px;
    width: 140px;
    border-radius: 80px 80px 50px 50px;
    background-image: linear-gradient(left, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.2) 100%);
    filter: blur(5px);
    z-index: 1;
  }
  .minion .minion-body .dungarees-front {
    bottom: 0;
    height: 90px;
    width: 140px;
    overflow: hidden;
    border-top: 1px solid #4883b8;
  }
  .minion .minion-body .dungarees-front:before {
    left: -30px;
    border-radius: 0 0 35% 0;
    box-shadow: 40px -40px 30px 40px #6d9cc6;
  }
  .minion .minion-body .dungarees-front:after {
    right: -30px;
    box-shadow: -40px -40px 30px 40px #6d9cc6;
    border-radius: 0 0 0 35%;
  }
  .minion .minion-body .dungarees-front:before, .minion .minion-body .dungarees-front:after {
    width: 56px;
    height: 75%;
    top: 0;
    border: 1px solid #4883b8;
  }
  .minion .minion-body .dungarees-pocket {
    bottom: 35px;
    left: 50%;
    margin-left: -17.5px;
    height: 35px;
    width: 35px;
    border-radius: 0 0 15px 15px;
    border-left: 1px solid #4883b8;
    border-right: 1px solid #4883b8;
    border-bottom: 1px solid #4883b8;
  }
  .minion .minion-body .dungarees-pocket:before {
    top: -13px;
    left: -2px;
    height: 15px;
    width: 37px;
    border-bottom: 1px solid #4883b8;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-radius: 20px;
  }
  .minion .minion-body .dungarees-pocket .logo {
    top: 50%;
    left: 50%;
    margin-left: -12.5px;
    margin-top: -10.5px;
    height: 25px;
    width: 25px;
    background: #333;
    border-radius: 50%;
  }
  .minion .minion-body .dungarees-pocket .logo:before {
    top: 50%;
    left: 50%;
    margin-left: -7.5px;
    margin-top: -7.5px;
    height: 15px;
    width: 15px;
    background: #6d9cc6;
    transform: rotate(45deg);
  }
  .minion .minion-body .dungarees-pocket .logo:after {
    top: 50%;
    left: 50%;
    margin-left: -3.5px;
    margin-top: -3.5px;
    height: 7px;
    width: 7px;
    background: #333;
    border-radius: 50%;
    z-index: 5;
  }
  .minion .minion-body .dungarees-pocket .logo span {
    height: 2px;
    background: #333;
    border-bottom: 1px solid #6d9cc6;
    width: 12.5px;
    right: 0;
    top: 48%;
    margin-top: -1px;
    z-index: 6;
  }
  .minion .minion-body .dungarees-bottom {
    bottom: 0;
    height: 40px;
    width: 140px;
    background-color: #6d9cc6;
    background-image: linear-gradient(top, rgba(109, 156, 198, 1) 45%, rgba(75, 101, 135, 1) 100%);
    border-top: 1px solid #4883b8;
  }
  .minion .minion-body .dungarees-strap {
    top: 127px;
    height: 60px;
    width: 12px;
    background: #6d9cc6;
    border: 1px solid #4883b8;
  }
  .minion .minion-body .dungarees-strap.left {
    left: 5px;
    transform: rotate(-65deg);
  }
  .minion .minion-body .dungarees-strap.right {
    right: 5px;
    transform: rotate(65deg);
  }
  .minion .minion-body .dungarees-strap .button {
    bottom: 0;
    left: 2px;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background: #333;
  }
  .minion .goggle-strap {
    top: 68px;
    height: 3px;
    background: #000;
    width: 16px;
    z-index: 6;
  }
  .minion .goggle-strap.left {
    left: -2px;
  }
  .minion .goggle-strap.left:before, .minion .goggle-strap.left:after {
    border-right: 16px solid #444;
  }
  .minion .goggle-strap.right {
    right: -2px;
  }
  .minion .goggle-strap.right:before, .minion .goggle-strap.right:after {
    border-left: 16px solid #444;
  }
  .minion .goggle-strap:before, .minion .goggle-strap:after {
    height: 6px;
  }
  .minion .goggle-strap:before {
    top: -7px;
    border-top: 2px solid transparent;
  }
  .minion .goggle-strap:after {
    top: 3px;
    border-bottom: 2px solid transparent;
  }
  .minion .goggle-strap-link {
    top: 58px;
    height: 25px;
    width: 5px;
    background: #999;
    z-index: 7;
  }
  .minion .goggle-strap-link.left {
    left: 12px;
  }
  .minion .goggle-strap-link.right {
    right: 12px;
  }
  .minion .goggle-frame {
    top: 40px;
    height: 50px;
    width: 50px;
    border: 5px solid #ccc;
    border-radius: 50%;
    overflow: hidden;
    z-index: 8;
  }
  .minion .goggle-frame.left {
    left: 30%;
    margin-left: -30px;
  }
  .minion .goggle-frame.left .goggle {
    left: -1px;
  }
  .minion .goggle-frame.right {
    right: 30%;
    margin-right: -30px;
  }
  .minion .goggle-frame.right .goggle {
    right: -1px;
  }
  .minion .goggle-frame .goggle {
    height: 50px;
    width: 50px;
    border: 3px solid #666;
    border-radius: 50%;
  }
  .minion .goggle-frame .goggle .eye {
    background: whitesmoke;
    height: 46px;
    width: 50px;
    border-radius: 50%;
    margin: 1px 0;
    box-shadow: inset 0px 2px 10px 0px rgba(51, 51, 51, 0.5), inset 0px -1px 5px 0px rgba(51, 51, 51, 0.3);
    position: relative;
    overflow: hidden;
  }
  .minion .goggle-frame .goggle .eye .pupil {
    top: 50%;
    left: 50%;
    margin: -7.5px;
    height: 15px;
    width: 15px;
    background-color: #e7a452;
    background-image: radial-gradient(#e7a452 0%, #91695c 49%, #91695c 74%, #000 99%);
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
  }
  .minion .goggle-frame .goggle .eye .pupil .dot {
    top: 50%;
    left: 50%;
    margin-top: -2.5px;
    margin-left: -2.5px;
    height: 5px;
    width: 5px;
    background: #333;
    border-radius: 50%;
  }
  .minion .goggle-shadow {
    height: 75px;
    top: 45px;
    border-radius: 50%;
    background-image: radial-gradient(rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 50%);
    z-index: 5;
  }
  .minion .goggle-shadow.left {
    left: 5px;
    width: 130px;
  }
  .minion .goggle-shadow.right {
    left: 55px;
    width: 100px;
  }
  .minion .mouth {
    top: 110px;
    left: 50%;
    margin-left: -30px;
    height: 20px;
    width: 60px;
    border-bottom: 2px solid #de9a33;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
    border-radius: 70%;
    z-index: 5;
    box-shadow: inset 0 -1px 2px -1px rgba(0, 0, 0, 0.3);
  }
  .minion .arm {
    top: 160px;
    height: 80px;
    width: 12px;
    z-index: -1;
    background: #ffcb4f;
    overflow: hidden;
  }
  .minion .arm.left {
    left: -12px;
    border-radius: 20px 0 0 20px / 80px 0 0 20px;
    transform: rotate(0deg);
  }
  .minion .arm.left:before {
    background-image: linear-gradient(left, rgba(250, 250, 250, 0.3) 20%, rgba(0, 0, 0, 0) 100%);
  }
  .minion .arm.right {
    right: -12px;
    border-radius: 0 20px 20px 0 / 0 80px 20px 0;
    transform: rotate(0deg);
  }
  .minion .arm.right:before {
    background-image: linear-gradient(left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 90%);
  }
  .minion .arm:before {
    height: 100%;
    width: 100%;
  }
  .minion .arm-shadow {
    top: 180px;
    height: 30px;
    width: 5px;
    border-radius: 50%;
  }
  .minion .arm-shadow.left {
    left: 0px;
    box-shadow: inset 2px 0 3px -1px rgba(0, 0, 0, 0.3);
    transform: rotate(5deg);
  }
  .minion .arm-shadow.right {
    right: 0px;
    box-shadow: inset -2px 0 3px -1px rgba(0, 0, 0, 0.3);
    transform: rotate(-5deg);
  }
  .minion .glove {
    bottom: 0;
    width: 17px;
    height: 18px;
    background: #333;
    border-radius: 0 0 30px 30px;
  }
  .minion .glove.left {
    left: -14px;
    transform: rotate(-10deg);
  }
  .minion .glove.left:before {
    left: -2px;
    transform: rotate(20deg);
  }
  .minion .glove.left:after {
    left: 13px;
    transform: rotate(-30deg);
  }
  .minion .glove.left .finger {
    left: 5px;
    transform: rotate(0deg);
  }
  .minion .glove.right {
    right: -14px;
    transform: rotate(10deg);
  }
  .minion .glove.right:before {
    right: -2px;
    transform: rotate(-20deg);
  }
  .minion .glove.right:after {
    right: 13px;
    transform: rotate(30deg);
  }
  .minion .glove.right .finger {
    right: 5px;
    transform: rotate(0deg);
  }
  .minion .glove:before {
    bottom: 0px;
    height: 20px;
    width: 10px;
    background: #333;
    border-radius: 0 0 20px 20px;
  }
  .minion .glove:after {
    bottom: -4px;
    height: 20px;
    width: 10px;
    background: #333;
    border-radius: 0 0 20px 20px;
  }
  .minion .glove .finger {
    bottom: -6px;
    height: 20px;
    width: 10px;
    background: #333;
    border-radius: 0 0 20px 20px;
    z-index: 10;
  }
  .minion .wrist {
    height: 30px;
    width: 16px;
    border-radius: 40%;
  }
  .minion .wrist.front {
    bottom: 15px;
    border-bottom: 5px solid #333;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
  }
  .minion .wrist.back {
    bottom: -11px;
    border-top: 5px solid #333;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    z-index: -2;
  }
  .minion .wrist.left {
    left: -19px;
  }
  .minion .wrist.right {
    right: -19px;
  }
  .minion .leg {
    bottom: -15px;
    height: 15px;
    width: 25px;
    background: #4b6587;
    z-index: -1;
    border-left: 1px solid #4883b8;
    border-right: 1px solid #4883b8;
  }
  .minion .leg.left {
    left: 40px;
    border-radius: 0 0 10% 20% / 0 0 80% 80%;
  }
  .minion .leg.left:after {
    transform: rotate(55deg);
    left: -12px;
  }
  .minion .leg.right {
    right: 40px;
    border-radius: 0 0 20% 10% / 0 0 80% 80%;
  }
  .minion .leg.right:after {
    transform: rotate(-55deg);
    right: -12px;
  }
  .minion .leg:after {
    top: -10px;
    background: #4b6587;
    height: 10px;
    width: 20px;
    border-bottom: 1px solid #4883b8;
  }
  .minion .shoe {
    bottom: -26px;
    width: 30px;
    height: 10px;
    background: #222;
    z-index: -2;
  }
  .minion .shoe.left {
    right: 74px;
    border-radius: 50px 20px 15px 10px;
    transform: rotate(-3deg);
  }
  .minion .shoe.left:before {
    right: 0px;
  }
  .minion .shoe.left:after {
    right: 0;
    border-radius: 10px 0 0 10px;
  }
  .minion .shoe.right {
    left: 74px;
    border-radius: 20px 50px 10px 15px;
    transform: rotate(3deg);
  }
  .minion .shoe.right:before {
    left: 0px;
  }
  .minion .shoe.right:after {
    left: 0;
    border-radius: 0 10px 10px 0;
  }
  .minion .shoe:before {
    top: -10px;
    height: 15px;
    width: 22px;
    background: #222;
  }
  .minion .shoe:after {
    bottom: -3px;
    height: 3px;
    width: 30px;
    background-image: linear-gradient(top, #666 0%, #222 58%);
  }
  .minion .shadow {
    bottom: -38px;
    left: -10%;
    width: 140%;
    height: 30px;
    background: radial-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
    z-index: -5;
  }
</style>

<script>
document.addEventListener("mousemove", function (e) {
  const eyes = document.querySelectorAll(".pupil");
  eyes.forEach(pupil => {
    const eye = pupil.parentElement; // .eye container
    const rect = eye.getBoundingClientRect();

    // Calculate mouse position vs eye center
    const eyeCenterX = rect.left + rect.width / 2;
    const eyeCenterY = rect.top + rect.height / 2;

    let dx = e.clientX - eyeCenterX;
    let dy = e.clientY - eyeCenterY;

    // Limit pupil movement (max ±10px)
    const maxMove = 10;
    const distance = Math.sqrt(dx * dx + dy * dy);

    if (distance > maxMove) {
      dx = (dx / distance) * maxMove;
      dy = (dy / distance) * maxMove;
    }

    pupil.style.transform = `translate(${dx}px, ${dy}px)`;
  });
});
</script>

Minion Eye-Tracker Animation

Leave a comment