Skip to main content

Archive

Show more

Cursor Animation With Hover Effect Using GSAP | HTML, CSS And GSAP

by Rustcode
Cursor-Animation-With-Hover-Effect-HTML-CSS-And-GSAP

Cursor Animation With Hover Effect Using GSAP Using HTML, CSS And GSAP

You must have seen the portfolio of some developer or have seen websites with animation. On that developers change the mouse cursor and design it accordingly. Similarly, we will also create a mouse cursor here, which will become bigger than the normal size on hovering over a button and the background of the mouse will also change. We have also created this type of mouse cursor using JavaScript's Pointerjs plugin. But the hover effect was not created in that cursor. Pointerjs plugin was used which slows down the response of the website.

We hope you have understood the concept of this mouse cursor animation. Now let us move on to the techniques that we are using to achieve this goal. As always HTML and CSS is mandatory. Javascript will be used to create this cursor animation and GSAP will also be used.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Cursor Animation With Hover Effect Using GSAP | Rustcode</title>   
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>


02. HTML

<!DOCTYPE html>
<html>
<head>
 <title>Cursor Animation With Hover Effect Using GSAP | Rustcode</title>
 <link rel="stylesheet" href="style.css">
</head>

<body>

<div class="cursor"></div>

<div class="container">
  <button>Hover me</button>
</div>

<script src="script.js"></script>
</body>
</html>

Now it's time to add the animation library GSAP. You can visit the official website of Greensock to read the documentation.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>


03. CSS

  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700');

  *{
    margin: 0px;
    padding: 0px;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    box-sizing: border-box;
    cursor: none;
  }

  .container{
    background: #E8DDB5;
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
  }

  button{
    border: 0px;
    outline: 0px;
    background: #745296;
    padding: 16px 32px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px 0px;
    margin: 1rem 0;
    color: white;
  }

  .cursor{
    width: 50px;
    height: 50px;
    border: 3px solid white;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    transform-origin: 100% 100%;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
  }

  .scale-cursor{
    background: white;
  }


04. JAVASCRIPT

let mouseCursor = document.querySelector(".cursor");
let btn = document.querySelectorAll("button");

window.addEventListener("mousemove", cursor);

function cursor(e){
  gsap.to(mouseCursor, 0.4, {
    x: e.clientX,
    y: e.clientY
  });
}

btn.forEach(link => {
  link.addEventListener("mouseover", ()=>{
    mouseCursor.classList.add("scale-cursor");
    gsap.to(mouseCursor, 0.4, {
      scale: 2
    });
  });

  link.addEventListener("mouseleave", ()=>{
    mouseCursor.classList.remove("scale-cursor");
    gsap.to(mouseCursor, 0.4, {
      scale: 1
    });
  });
});


05. Youtube Video



06. SOURCE CODE




Comments

Post a Comment