Rating Animation CSS
Rating Animation CSS

Hy Everyone, In this tutorial, we will create a Rating Animation using CSS with SVG and GSAP. The rating measures a product on its popularity or importantce.

Here our Rating Animation is created using SVG and GSAP Library.

Rating Animation CSS

GSAP

The GreenSock Animation Platform (GSAP for short) is a powerful JavaScript library that enables front-end developers and designers to create robust timeline-based animations.

For Creating our Rating Animation we will need three files called index.html, style.css, and script.js. Let’s start with our index.html file.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" />
    <title>Rating Animation CSS</title>
    <script src="https://unpkg.co/[email protected]/dist/gsap.min.js"></script>
    <script src="https://assets.codepen.io/16327/MorphSVGPlugin3.min.js"></script>
  </head>
  <body>
    <svg viewBox="0 40 947 650" >
      <text text-anchor="middle" x="485" y="110" font-size="35">Hi! wanna rate your experience?</text>
      <g>
          <path class="body" d="M576,362c-14-59,4.7-91.4-10-133c-14.9-42.3-63-66.1-119-59c-56.4,7.2-89.8,59.4-99,97c-6.9,28.1,2.7,34.8,6,92c5.1,88.4-59,134,79,137c68.8,1.5,145-1,158-47C597,427.7,584.3,396.8,576,362z" />
          <path class="eye eye--left" d="M433.9,244c5.3,0.6,9,8.1,8.2,16.8c-0.8,8.7-5.8,15.4-11.1,14.8c-5.3-0.6-9-8.1-8.2-16.8 C423.6,250.1,428.6,243.5,433.9,244z" />
          <path class="eye eye--right" d="M508.3,270.5c-5,0.2-9.3-6.2-9.6-14c-0.3-7.9,3.5-14.4,8.5-14.5c5-0.1,9.3,6.2,9.6,14 C517.1,263.9,513.3,270.4,508.3,270.5z" />
          <path class="month month" d="M483.8,292.3c11.1,7,18.9,16.9,15,27.4s-16.3,11.1-29.4,10.6c-16.7-0.7-18.9-16.9-15-27.4 C458.4,292.3,470.1,283.7,483.8,292.3z" />
          <g class="eyebrow--girl">
              <path class="eyebrow eyebrow--left" d="M373,280c-0.6,0.5-1.3,0.8-2.1,0.9c-2,0.2-3.7-1.3-3.9-3.3c-0.1-1.2-2.3-29.9,17.4-57.7 c1.1-1.6,3.4-2,5-0.8c1.6,1.1,2,3.4,0.8,5c-18.3,25.7-16.2,52.7-16.1,53z" />
              <path class="eyebrow eyebrow--second" d="M348.9,294.7c-0.7,0.9-1.7,1.5-2.8,1.8c-2.8,0.7-5.6-1.1-6.3-3.9c-0.4-1.7-10-42.9,12.6-87.6 c1.3-2.6,4.5-3.6,7-2.3c2.6,1.3,3.6,4.5,2.3,7c-20.9,41.3-11.9,80-11.8,80.4z" />
              <path class="eyebrow eyebrow--right" d="M546.4,223.6c0.2-0.7,0.6-1.3,1.2-1.7c1.5-1,3.5-0.7,4.6,0.8c0.6,0.9,15.6,22.7,12.7,53.8  c-0.2,1.8-1.8,3.1-3.6,3c-1.8-0.2-3.1-1.8-3-3.6c2.7-28.8-11.4-49.2-11.5-49.4z" />
              <path class="eyebrow eyebrow--second" d="M560.2,202.7c0.2-1,0.6-2,1.4-2.7c1.9-1.8,5-1.8,6.8,0.2c1.1,1.2,27.7,29.4,30.3,75.3 c0.2,2.7-1.9,4.9-4.5,5.1c-2.7,0.2-4.9-1.9-5.1-4.5c-2.4-42.3-27.4-68.9-27.6-69.2z" />
          </g>
          <path class="hand hand--left" d="M401.8,316.6c1.8,0,3.4,1.2,3.8,3c0.3,1.3,0.7,3.4,1,5.9c2.7-1.4,5.6-2.6,8.4-3.3c1.8-0.5,3.7,0.3,4.5,2 c0.9,1.6,0.4,3.7-1,4.8c-1.9,1.6-3.9,3-5.8,4.3c-4,2.9-7.9,5.6-10.5,9.5c-1.9,2.8-3.4,5.9-5.1,9.1c-1.8,3.6-3.7,7.3-6.1,10.8 c-4.2,6.1-7.1,12.4-7.6,16.8c-0.3,2.1-2.2,3.7-4.4,3.4c-2.1-0.3-3.7-2.2-3.4-4.4c1-8.1,6.6-16.9,8.9-20.3 c2.1-3.1,3.8-6.4,5.6-9.9c1.7-3.3,3.4-6.7,5.5-9.9c0.3-0.4,0.5-0.8,0.8-1.1c-1.4-0.6-2.7-1.3-3.9-2c-0.7-0.1-1.3-0.3-1.9-0.7 c-0.7-0.6-1.4-1.1-2.1-1.7c-1.5-1.4-1.7-3.6-0.5-5.2c1.2-1.6,3.4-2.1,5.1-1.1c0.7,0.4,1.4,0.8,2.1,1.2c0.9,0.6,1.8,1.1,2.7,1.6 c0-1.1,0-2.2-0.1-3.3c0-2-0.1-4,0-5.8c0.1-2,1.6-3.5,3.5-3.7C401.6,316.6,401.7,316.6,401.8,316.6z" />
          <path class="hand hand--right" d="M553.1,280.7c1.6,0.8,2.5,2.7,2,4.6c-0.9,3.1-3.7,6.7-7.7,11.5c-0.4,0.4-0.7,0.8-1,1.2 c1.3,2.5,2.2,5.3,3.1,7.8c0.5,1.7,1.1,3.2,1.6,4.5c2.2,5,5,9.6,7.9,14.6c2.3,3.9,4.8,8,6.8,12.1l1,1.9c5.6,11.3,11,23,9.6,30.2 c-0.4,2.1-2.5,3.5-4.6,3.1c-2.1-0.4-3.5-2.5-3.1-4.6c1-5.2-6.2-19.7-8.9-25.2l-1-1.9c-1.9-3.9-4.3-7.8-6.5-11.6 c-2.9-4.9-6-10-8.4-15.4c-0.7-1.6-1.3-3.5-1.9-5.2c-1.1-3.5-2.3-7.1-4.3-9.1c-1.8-1.7-4.6-2.6-7.6-3.6c-1.3-0.4-2.6-0.8-3.9-1.3 c-1.9-0.7-3-2.9-2.3-4.8c0.6-2,2.7-3.1,4.7-2.6l2.3,0.6c0.5,0.1,0.9,0.2,1.4,0.3c-0.7-2.2-1.1-4.4-1.5-6.3 c-0.3-1.6-0.6-3.1-1-4.3c-0.5-1.9,0.4-3.9,2.3-4.7c1.8-0.8,4,0,4.9,1.7c2.5,4.5,5,9.3,6.9,14.5c1.7-2.1,3.3-4.3,3.6-5.5 c0.6-2.1,2.7-3.3,4.8-2.7C552.6,280.5,552.8,280.6,553.1,280.7z" />
      </g>

      <g transform="translate(0 520)">
          <g class="card card--selected">
              <path d="M247.8,75.4l-3.1-0.5c-11.5-2.1-18.9-13.4-16.1-24.7l5.5-22.2c2.8-11.4,14.7-18.1,25.9-14.4l0,0c9.1,3,14.9,11.9,13.9,21.4l-2.4,22.8C270.2,69.2,259.4,77.4,247.8,75.4z"></path>
              <text class="cards-number" transform="matrix(1 0.27 -0.27 1 235 57)">1</text>
          </g>
          <g class="card">
              <path d="M305.5,92.7l-20-3.7c-6.4-1.2-10.8-7-10.2-13.5l3.4-37.7c0.7-7.5,7.8-12.8,15.2-11.2l21.9,4.7c6.5,1.4,10.8,7.6,9.8,14.1l-5.3,36.8C319.3,89.2,312.5,94,305.5,92.7z"></path>
              <text class="cards-number" transform="matrix(1 0.20 -0.20 1 284.5 72)">2</text>
          </g>
          <g class="card">
              <path d="M344.2,33.2l18.7,0c7.5,0,13.2,6.7,12,14.1L368,88c-1.2,7-8.1,11.5-14.9,9.7L338.6,94c-5.7-1.4-9.5-6.8-9.1-12.6l2.7-37C332.6,38.1,337.9,33.2,344.2,33.2z"></path>
              <text class="cards-number" transform="matrix(1 0.15 -0.15 1 336.5 78)">3</text>
          </g>
          <g class="card">
              <path d="M412.2,108.9l-26.8,0.3c-6.8,0.1-12-6-10.8-12.6l8.8-53.2c0.9-5.7,6.2-9.7,11.9-9l13.8,1.5c5.2,0.6,9.2,4.7,9.7,9.9l4.1,51.3C423.4,103.5,418.5,108.9,412.2,108.9z"></path>
              <text class="cards-number" transform="matrix(1 0.05 -0.05 1 385 86)">4</text>
          </g>
          <g class="card">
              <path d="M436.4,27.7l19.4-1.1c8.8-0.5,15.9,7.1,15,15.8l-6.8,60.1c-0.9,7.7-7.7,13.3-15.5,12.6l-7.1-0.6c-6.8-0.6-12.3-6-12.9-12.9L423,43.3C422.2,35.2,428.3,28.1,436.4,27.7z"></path>
              <text class="cards-number" transform="matrix(1 0.02 -0.02 1 433 80)">5</text>
          </g>
          <g class="card">
              <path d="M503.6,111.7l-20.2,0.6c-7.2,0.2-13-5.7-12.7-12.9l2.4-51c0.3-7.1,6.6-12.5,13.7-11.7l14.6,1.6c6,0.6,10.6,5.5,11,11.5l3.3,48.8C516,105.5,510.6,111.5,503.6,111.7z"></path>
              <text class="cards-number" transform="matrix(1 -0.02 0.02 1 483 85)">6</text>
          </g>
          <g class="card">
              <path d="M556.9,99.2L530,98.7c-6.2-0.1-11.4-4.9-11.9-11.1L515.2,54c-0.6-6.7,4.5-12.7,11.2-13.2l24.6-1.9c6.4-0.5,12.1,4.1,13,10.4l5.2,36C570.2,92.7,564.4,99.3,556.9,99.2z"></path>
              <text class="cards-number" transform="matrix(1 -0.08 0.08 1 533 85)">7</text>
          </g>
          <g class="card">
              <path d="M586,35.5l8.5-0.1c9-0.1,16.7,6.4,18.1,15.3l2.8,17.9c1.4,9.3-4.5,18.1-13.6,20.3L593,91c-10.4,2.5-20.8-4.6-22.1-15.3l-2.5-19.9C567,45.1,575.2,35.7,586,35.5z"></path>
              <text class="cards-number" transform="matrix(1 -0.11 0.11 1 582 79)">8</text>
          </g>
          <g class="card">
              <path d="M663.3,91.6L639.4,99c-7.1,2.2-14.5-2.4-15.6-9.8l-7.6-48.3c-1.1-6.8,3.7-13.2,10.6-14l17.9-2.1c5.8-0.7,11.3,2.9,13.1,8.4l13.6,43.1C673.3,82.7,669.7,89.6,663.3,91.6z"></path>
              <text class="cards-number" transform="matrix(1 -0.15 0.15 1 631 78)">9</text>
          </g>
          <g class="card">
              <path d="M671.6,15.4l40.1-12c6.9-2.1,14.1,2.3,15.5,9.3l8.8,44.6c1.3,6.4-2.7,12.6-9,14.2l-34.7,8.7c-6.1,1.5-12.4-1.9-14.5-7.9L663.6,31C661.4,24.4,665,17.3,671.6,15.4z"></path>
              <text class="cards-number" transform="matrix(1 -0.28 0.28 1 680.5 65)">10</text>
          </g>
      </g>
  </svg>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

style.css

body {
  font-family: sans-serif;
  height: 100vh;
  display: flex;
  justify-content: space-around;
}
svg {
  width: 400px;
}
.body {
  fill: #2EB7CE;
}
.card {
  cursor: pointer;
}
text,
.card path {
  fill: #95B0B6;
  transition: all 0.2s ease-out;
}
.card--selected path {
  fill: #000;
  opacity: 1;
}
.cards-number {
  fill: #fff;
  font-size: 40px;
}

script.js

const rateCards = Array.from(document.querySelectorAll('.card'));
let currentRate;

// Prepare graphics
initGraphics();

// Trigger initial animations
gsap.delayedCall(.3, changeRate, [7]);

// Animate character on click
rateCards.forEach((card, cardIdx) => {
    card.onclick = function () { changeRate(cardIdx); };
});

//--------------------------------------------------------------
// Update buttons and animate the character

function changeRate(newRate) {
    if (currentRate !== newRate) {
        rateCards.forEach(function (card, idx) {
            if (idx > newRate) {
                card.classList.remove('card--selected');
            } else {
                card.classList.add('card--selected');
            }
        });
        currentRate = newRate;
        animateAvatar(newRate, .5);
    }
}

//--------------------------------------------------------------
// Prepare graphics

function initGraphics() {
    gsap.set('.hand--right', {
        svgOrigin: '570 370'
    });
    gsap.set('.hand--left', {
        svgOrigin: '380 370'
    });
    gsap.set('.eyebrow--left', {
        svgOrigin: '442 262'
    });
    gsap.set('.eyebrow--right', {
        svgOrigin: '515 250'
    });
}

//--------------------------------------------------------------
// Animate the character

function animateAvatar(rate, dur) {
    const states = [ {
        leftEye: 'M433.9,244c5.3,0.6,9,8.1,8.2,16.8c-0.8,8.7-5.8,15.4-11.1,14.8c-5.3-0.6-9-8.1-8.2-16.8 C423.6,250.1,428.6,243.5,433.9,244z',
        rightEye: 'M508.3,270.5c-5,0.2-9.3-6.2-9.6-14c-0.3-7.9,3.5-14.4,8.5-14.5c5-0.1,9.3,6.2,9.6,14 C517.1,263.9,513.3,270.4,508.3,270.5z',
        month: 'M483.8,292.3c11.1,7,18.9,16.9,15,27.4s-16.3,11.1-29.4,10.6c-16.7-0.7-18.9-16.9-15-27.4 C458.4,292.3,470.1,283.7,483.8,292.3z',
        leftHand: {
            x: '0',
            y: '0',
            rotation: '0',
            scale: 1
        },
        rightHand: {
            x: '0',
            y: '0',
            rotation: '0',
            scale: 1
        }
    }, {
        leftEye: 'M418.5,260.6c-1.8,5.1-5.6,8.4-8.5,7.4c-2.9-1-3.7-6-1.9-11.1c1.8-5.1,5.6-8.4,8.5-7.4 C419.5,250.5,420.3,255.5,418.5,260.6z',
        rightEye: 'M543.6,256.7c2.1,5.9,1.1,11.6-2.2,12.8c-3.3,1.2-7.6-2.7-9.7-8.6c-2.1-5.9-1.1-11.6,2.2-12.8 C537.2,247,541.6,250.8,543.6,256.7z',
        month: 'M434.4,319.2c-0.5,0-0.9-0.1-1.3-0.4c-1.2-0.7-1.5-2.3-0.8-3.4c2.3-3.5,8.7-9.2,16.8-5.5   c8.3,3.8,12.2,2.4,13.2,1.8c2.8-1.5,15.3-3.7,20.3,0.2c2.8,2.2,3.2,2.2,7.6-0.2c5.3-2.9,15.7-2.4,19,0.2c1.1,0.8,1.3,2.4,0.5,3.5   s-2.4,1.3-3.5,0.5c-1.4-1.1-9.7-2-13.6,0.2c-5.2,2.9-8,3.7-13.1-0.2c-2.9-2.2-13-0.8-14.9,0.2c-2.4,1.3-7.9,2.8-17.7-1.7   c-6.1-2.8-10.1,2.9-10.5,3.6C436,318.8,435.2,319.2,434.4,319.2z',
        leftHand: {
            x: '0',
            y: '-8',
            rotation: '-3',
            scale: 1
        },
        rightHand: {
            x: '18',
            y: '12',
            rotation: '-20',
            scale: 1
        }
    }, {
        leftEye: 'M418.6,259.4c-0.5,8-4.5,14.3-9,14.1c-4.5-0.3-7.8-7-7.3-15c0.5-8,4.5-14.3,9-14.1 C415.8,244.6,419,251.4,418.6,259.4z',
        rightEye: 'M542.5,259c2,7.8,0.1,15-4.2,16.1c-4.4,1.1-9.5-4.3-11.5-12c-2-7.8-0.1-15,4.2-16.1 C535.3,245.8,540.5,251.2,542.5,259z',
        month: 'M466,317c-10.2,0.9-14,5-19,5c-0.7,0-2.7-1.2-3-3c-0.4-2.1,1-4.2,2-5c9.6-8.1,37-9,50-1c1.6,1,2,3,2,3   c-0.2,2.2-1.1,4.7-4,4C485,318,477.2,316.1,466,317z',
        leftHand: {
            x: '5',
            y: '3',
            rotation: '-160',
            scale: 1
        },
        rightHand: {
            x: '3',
            y: '-5',
            rotation: '143',
            scale: 1
        }
    }, {
        leftEye: 'M415.7,278.1c-0.5,8-4.5,14.3-9,14.1c-4.5-0.3-7.8-7-7.3-15c0.5-8,4.5-14.3,9-14.1 C413,263.3,416.2,270.1,415.7,278.1z',
        rightEye: 'M517.1,280.4c-0.5,8-4.5,14.3-9,14.1c-4.5-0.3-7.7-7-7.3-15c0.5-8,4.5-14.3,9-14.1 C514.3,265.6,517.6,272.3,517.1,280.4z',
        month: 'M462,315c-6-0.4-13,2-19,2c-0.5,0-1.9-0.9-2-2c-0.2-1.4,0-2.7,1-3c6-2,15.6-3.2,20-3c15,1,19,2,26,2   c2.1,0,11,0,12,1c0.2,0.2,1.4,1.6,1,3c-0.3,1.2-1.5,1.9-2,2C493,318,478,316,462,315z',
        leftHand: {
            x: '-2',
            y: '12',
            rotation: '-163',
            scale: 1
        },
        rightHand: {
            x: '1',
            y: '-2',
            rotation: '155',
            scale: 1
        }
    }, {
        leftEye: 'M406,257.6c0,8.2-3.7,14.9-8.3,14.9c-4.6,0-8.4-6.6-8.4-14.9c0-8.2,3.7-14.9,8.3-14.9 C402.2,242.8,405.9,249.4,406,257.6z',
        rightEye: 'M550,257.2c0,8.2-3.7,14.9-8.3,14.9c-4.6,0-8.3-6.6-8.4-14.8c0-8.2,3.7-14.9,8.3-14.9 C546.2,242.3,550,249,550,257.2z',
        month: 'M469.7,323.6c-6.7-0.1-13.2-0.9-18.7-2.4c-2.1-0.5-3.3-2.7-2.8-4.8s2.7-3.3,4.8-2.8 c13.1,3.4,33.6,3.1,43.9-3.5c1.8-1.2,4.2-0.6,5.4,1.2c1.2,1.8,0.6,4.2-1.2,5.4C493.3,321.7,481.3,323.8,469.7,323.6z',
        leftHand: {
            x: '-2',
            y: '25',
            rotation: '-180',
            scale: 1
        },
        rightHand: {
            x: '10',
            y: '5',
            rotation: '155',
            scale: 1
        }
    }, {
        leftEye: 'M414,252.2c-0.7,11.5-6.4,20.5-12.8,20.1c-6.4-0.4-11.1-10-10.4-21.4c0.7-11.4,6.4-20.4,12.8-20 C410.1,231.1,414.7,240.7,414,252.2z',
        rightEye: 'M554.9,260.5c-0.7,11.7-6.5,20.8-13,20.4c-6.5-0.4-11.2-10.1-10.5-21.8c0.7-11.6,6.5-20.8,13-20.4 C550.9,239.1,555.6,248.8,554.9,260.5z',
        month: 'M468.9,319.9c-6.5-0.5-12.8-1.7-18.1-3.4c-1.8-0.6-2.8-2.5-2.2-4.3c0.6-1.8,2.5-2.8,4.3-2.2 c12.6,4.2,32.8,5.1,43.4-0.8c1.7-0.9,3.7-0.3,4.7,1.3c0.9,1.7,0.3,3.7-1.3,4.7C491.8,319.5,480.1,320.7,468.9,319.9z',
        leftHand: {
            x: '-8',
            y: '12',
            rotation: '-108',
            scale: 1
        },
        rightHand: {
            x: '-2',
            y: '5',
            rotation: '110',
            scale: 1
        }
    }, {
        leftEye: 'M414.5,250.4c-0.7,11.9-6.7,21.2-13.3,20.8c-6.7-0.4-11.5-10.4-10.8-22.2c0.7-11.9,6.7-21.2,13.3-20.8 C410.3,228.6,415.1,238.6,414.5,250.4z',
        rightEye: 'M545.1,250.3c0.5,11.1-4.2,20.2-10.4,20.5c-6.2,0.3-11.6-8.5-12-19.6c-0.4-11.1,4.2-20.2,10.4-20.5 C539.3,230.5,544.7,239.2,545.1,250.3z',
        month: 'M473.2,321.6c-8-0.6-19.4-9.9-25.8-12c-2.2-0.7-3.4-3.1-2.7-5.3c0.7-2.2,3.1-3.4,5.3-2.7 c15.5,5.1,40.2,6.2,53.2-1c2-1.1,4.6-0.4,5.7,1.7c1.1,2,0.4,4.6-1.7,5.7C497.7,313.3,486.9,322.7,473.2,321.6z',
        leftHand: {
            x: '-18',
            y: '-2',
            rotation: '-55',
            scale: 1
        },
        rightHand: {
            x: '-4',
            y: '7',
            rotation: '82',
            scale: 1
        }
    }, {
        leftEye: 'M424.9,245.8c-0.6,10.5-6.8,18.7-13.9,18.3c-7-0.4-12.3-9.3-11.6-19.8c0.7-10.5,6.9-18.7,13.9-18.3 C420.3,226.4,425.5,235.3,424.9,245.8z',
        rightEye: 'M547.9,248.8c0.8,10.9-3.5,20-9.6,20.5c-6.1,0.5-11.6-8-12.4-18.8c-0.8-10.9,3.5-20,9.6-20.5 C541.6,229.5,547.2,237.9,547.9,248.8z',
        month: 'M474.7,326c-10-0.8-26.8-7.7-36-14.3c-2.3-1.7-3.2-6.5-2.2-9.2c0.9-2.8,3.9-4.2,6.6-3.3 c19.4,6.4,50.3,7.7,66.4-1.2c2.5-1.4,5.7-0.5,7.1,2.1c1.4,2.5-0.1,5-2.1,7.1C503.4,319.9,491.9,327.3,474.7,326z',
        leftHand: {
            x: '-18',
            y: '-20',
            rotation: '-65',
            scale: 1.45
        },
        rightHand: {
            x: '-5',
            y: '-9',
            rotation: '82',
            scale: 1.43
        }
    }, {
        leftEye: 'M430.8,231.1c2.8,5.1-2.7,13.7-12.4,19.3c-9.7,5.6-19.9,6.1-22.7,1c-2.8-5.1,2.8-13.7,12.4-19.3 C417.8,226.6,427.9,226.1,430.8,231.1z',
        rightEye: 'M529.5,233.7c7.5,3,12.1,8.9,10.4,13.1c-1.7,4.2-9.1,5.1-16.6,2c-7.4-3.1-12.1-8.9-10.4-13.1 C514.7,231.6,522.1,230.7,529.5,233.7z',
        month: 'M463.8,317.7c-16.7-1.3-38-15.6-53.6-25c-4-2.4-14.9-9.8-11-8.5c11,3.6,16.3,4.8,20.9,6.1 c32.6,9.3,74.8,7,101.7-5c4.2-1.9,11.8-2.8,11.8-2.8s-8.9,12-14.5,15.6C497.7,311.8,492.6,319.8,463.8,317.7z',
        leftHand: {
            x: '-8',
            y: '0',
            rotation: '-65',
            scale: 1.1
        },
        rightHand: {
            x: '-5',
            y: '-9',
            rotation: '46',
            scale: 1.1
        }
    }, {
        leftEye: 'M407.5,236.2c-7.2,3.6-9.1,12.8-11.1,8.8c-2-4,2.1-10.2,9.3-13.9c7.2-3.6,14.6-3.3,16.7,0.7 C424.3,235.9,414.6,232.6,407.5,236.2z',
        rightEye: 'M536.2,234.2c7,3.9,10.9,10.3,8.7,14.2c-2.2,3.9-5.7-4.2-12.8-8.1c-7-3.9-14.9-2.2-12.7-6.1 C521.7,230.2,529.2,230.2,536.2,234.2z',
        month: 'M461.6,324.4c-40.2-6.2-45.6-17.9-63.4-31.3c-4.5-3.4-15.1-17.7-10.7-16c12.7,5,18.7,6.6,24.1,8.4 c37.5,12.7,84.2,3.9,117.9-9.5c7-2.8,19.4-6.2,19.4-6.2s-10.3,22-17.7,28.4C506.7,319.4,494.9,326.9,461.6,324.4z',
        leftHand: {
            x: '-14',
            y: '-20',
            rotation: '-60',
            scale: 0.95
        },
        rightHand: {
            x: '5',
            y: '-25',
            rotation: '45',
            scale: 0.95
        }
    }];

    gsap.to('.eye--left', {
          duration: dur,
        morphSVG: states[rate].leftEye
    });
    gsap.to('.eye--right', {
          duration: dur,
        morphSVG: states[rate].rightEye
    });
    gsap.to('.month', {
          duration: dur,
        morphSVG: states[rate].month
    });
    gsap.to('.hand--left', {
          duration: dur,
        x: states[rate].leftHand.x,
        y: states[rate].leftHand.y,
        rotation: states[rate].leftHand.rotation,
        scale: states[rate].leftHand.scale
    });
    gsap.to('.hand--right', {
          duration: dur,
        x: states[rate].rightHand.x,
        y: states[rate].rightHand.y,
        rotation: states[rate].rightHand.rotation,
        scale: states[rate].rightHand.scale
    });

    gsap.to('.eyebrow--second', {
          duration: dur,
        opacity: rate > 1 ? 0 : 0.7
    });

    const eyebrowLeft = document.querySelector('.eyebrow--left');
    const eyebrowRight = document.querySelector('.eyebrow--right');
    if (rate === 1) {
        gsap.to([eyebrowLeft, eyebrowRight], {
               duration: dur,
            scale: 1,
            rotation: 1,
            opacity: 0.7
        });
    } else if (rate === 2) {
        gsap.to(eyebrowLeft, {
               duration: dur,
            scale: 0.7,
            rotation: 40,
            opacity: 1
        });
        gsap.to(eyebrowRight, {
               duration: dur,
            scale: 0.75,
            rotation: -50,
            opacity: 1
        });
    } else {
        gsap.to([eyebrowLeft, eyebrowRight], {
               duration: dur,
            opacity: 0
        });
    }
}

If you are having any issues with the code, then you can visit our GitHub Account. Click Here!

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply