Spotlight Cursor Text Screen
Tags: html, css, javascript, beginners
Published: 2021-02-22 17:00:22

***Hello, guys in this tutorial we will create a Spotlight Cursor Text Screen Using <a href="https://greensock.com/gsap/">GSAP – GreenSock</a> 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**
```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>
```
###Step:2###
Then we need to add code for **style.css** which code I provide in the below screen.

```css
* {
  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;
}
```
><a href="https://blog.stackfindover.com/what-is-html/" rel="dofollow">What is HTML</a>
><a href="https://blog.stackfindover.com/animated-stars-with-realistic-moon-javascript/" rel="dofollow">Animated Stars JavaScript</a>
><a href="https://blog.stackfindover.com/best-animation-examples-2020/" rel="dofollow">Best Animation Examples</a>

###Spotlight Cursor Text Screen Video Output:###
{% youtube Nm_5QyOZtmo %}

###Spotlight Cursor Text Screen Codepen Output:###
{% codepen https://codepen.io/stack-findover/pen/poRGaZo %}