[SOLVED] Creating illustrated animated characters in my login page

Creating illustrated animated characters in my login page

I am trying to create an animation in my login page. I want to animate illustrated characters that react in a certain manner depending on what the user is doing in the page. Here's an example of what i am trying to achieve: https://dribbble.com/shots/21953371-WeStud-Creative-Log-In-For-The-Educational-Platform

For that, i want to pick up and learn a library. I heard of some options like GSAP and Three.js, but i am not sure which one is the most adequate for my use case.

Can you give me some insight on what tool to use, and overall how these animations can be created and incorporated ? Thank you.

Solution

You don't need for that 3js, basically you can use, but in example which you provided I dont see any. Effect from example you can achieve by vanilla js or gsap for example, and svg micro-animations (in my opinion is best way). That is not so complicated, most of time you will spend with svg, creating movement, and link these with MouseEvent which you need.

const leftEye = document.getElementById('left-eye');
const rightEye = document.getElementById('right-eye');
const face = document.getElementById('face');

window.addEventListener('mousemove', (event) => {
    const { clientX: mouseX, clientY: mouseY } = event;
    const faceRect = face.getBoundingClientRect();
    const faceCenterX = faceRect.left + faceRect.width / 2;
    const faceCenterY = faceRect.top + faceRect.height / 2;
    const deltaXLeft = mouseX - (faceCenterX - 70);
    const deltaYLeft = mouseY - (faceCenterY - 70); 
    const deltaXRight = mouseX - (faceCenterX + 30); 
    const deltaYRight = mouseY - (faceCenterY - 70);
    const angleLeft = Math.atan2(deltaYLeft, deltaXLeft);
    const angleRight = Math.atan2(deltaYRight, deltaXRight);
    const eyeRadius = 30;
    const eyeOffsetXLeft = Math.cos(angleLeft) * eyeRadius;
    const eyeOffsetYLeft = Math.sin(angleLeft) * eyeRadius;
    const eyeOffsetXRight = Math.cos(angleRight) * eyeRadius;
    const eyeOffsetYRight = Math.sin(angleRight) * eyeRadius;
    leftEye.setAttribute('cx', eyeOffsetXLeft);
    leftEye.setAttribute('cy', eyeOffsetYLeft);
    rightEye.setAttribute('cx', eyeOffsetXRight);
    rightEye.setAttribute('cy', eyeOffsetYRight);
});

body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    svg {
      width: 200px;
      height: 200px;
    }
    .eye-container {
      fill: none;
      stroke: black;
      stroke-width: 2;
    }
    .eye {
      fill: black;
    }

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" id="face">
  <circle cx="100" cy="100" r="80" fill="none" stroke="black" stroke-width="2"/>
  <g class="eye-container" transform="translate(70, 70)">
    <circle cx="0" cy="0" r="30" />
    <circle class="eye" cx="0" cy="0" r="10" id="left-eye"/>
  </g>
  <g class="eye-container" transform="translate(130, 70)">
    <circle cx="0" cy="0" r="30" />
    <circle class="eye" cx="0" cy="0" r="10" id="right-eye"/>
  </g>
</svg>