DEV Community

loading...
Cover image for Spotlight Cursor Text Screen

Spotlight Cursor Text Screen

stackfindover profile image Stackfindover ・3 min read

Hello, guys in this tutorial we will create a Spotlight Cursor Text Screen Using GSAP – GreenSock library

What is GSAP

Think of GSAP as the Swiss Army Knife of javascript animation…but better. It animates anything JavaScript can touch (CSS properties, canvas library objects, SVG, React, Vue, generic objects, whatever) and it solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery), including automatic GPU-acceleration of transforms. See the “Why GSAP?” article for details. Most other libraries only animate CSS properties. Plus, their sequencing abilities and runtime controls pale by comparison.

Common Query

  1. How to create Spotlight Cursor Text Screen
  2. Create Cursor Text Screen
  3. how to add Spotlight effect
  4. How to use GSAP – GreenSock
  5. How to create a custom cursor

Hello, guys In this tutorial we will try to solve above mention query. and also we will learn how to use the GSAP library and how to create a Spotlight Cursor Text Screen

First, we need to create three files index.html and style.css then we need to do code for it.

Step:1

Add below code inside index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Spotlight Cursor Text Screen</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500&display=swap" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
</head>
<body>
  <div class="cursor"></div>
  <div class="shapes">
    <span class="shape shape-1"></span>
    <span class="shape shape-2"></span>
    <span class="shape shape-3"></span>
  </div>

  <div class="content">
    <h1>YouTube</h1>
  </div>

  <script>
    document.body.addEventListener("mousemove", (evt) => {
      const mouseX = evt.clientX;
      const mouseY = evt.clientY;

      gsap.set(".ccursor", {
        x: mouseX,
        y: mouseY
      });

      gsap.to(".shape", {
        x: mouseX,
        y: mouseY,
        stagger: -0.1 
      });


    })
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step:2

Then we need to add code for style.css which code I provide in the below screen.

* {
  padding: 0;
  margin: 0;
  outline: 0;
  overflow: hidden;
  cursor: none;
  font-family: 'IBM Plex Sans', sans-serif;
}
.shapes {
  position: relative;
  height: 100vh;
  width: 100vw;
  background: #c4302b;
  overflow: hidden;
}
.content {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #fff;
  mix-blend-mode: screen;
}
h1 {
  font-size: 150px;
  color: #000;
  margin: 0;
  text-align: center;
}
.cursor {
  position: fixed;
  background: #ff0800;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  will-change: transform;
  user-select: none;
  pointer-events: none;
  z-index: 100000;
  margin: -10px 0 0 -20px;
}
.shape {
  will-change: transform;
  position: absolute;
  border-radius: 50%;
}
.shape.shape-1 {
  background: #ff0800;
  width: 550px;
  height: 550px;
  margin: -325px 0 0 -325px;
}
.shape.shape-2 {
  background: #ffe5e3;
  width: 340px;
  height: 340px;
  margin: -220px 0 0 -220px;
}
.shape.shape-3 {
  background: #000;
  width: 170px;
  height: 170px;
  margin: -135px 0 0 -135px;
}
Enter fullscreen mode Exit fullscreen mode

What is HTML
Animated Stars JavaScript
Best Animation Examples

Spotlight Cursor Text Screen Video Output:

Spotlight Cursor Text Screen Codepen Output:

We will update soon:)

Discussion (0)

pic
Editor guide