Home Web Development JavaScript Text Spotlight Cursor Hover Effect With GSAP | Spotlight Mask Over Text

Text Spotlight Cursor Hover Effect With GSAP | Spotlight Mask Over Text

January 3, 2020

5366

How we can create an attractive spotlight hover or mouser over effect? Solution: See this Text Spotlight Cursor Hover Effect With GSAP, Spotlight Mask Over Text.

Previously I have shared a text mask effect, it is a little similar to that but there is much different because there is a spotlight effect. Basically, A spotlight is a powerful stage lighting instrument that projects a bright beam of light onto a selected space. But we can create and use this kind of effect for web elements also, for showing selected or focused items.

Today you will learn to create Spotlight Mask Over Texts. Basically, there is a text and circular spotlight with 3 different colors. The spotlight color arranged in a circular form, like smaller circles in front and bigger ones in the back. Because with this arrangement, we can see all 3 circles. Also, there is another circle for showing the mouse pointer and it placed in the middle of the spotlight circle group. Now the spotlight will move according to mouse direction, but you can see the light over the text because there is a kind of masking effect.

So, Today I am sharing Text Spotlight Cursor Hover Effect With GSAP. Greensock Animation API, as known as GSAP is an animation library that helps you create performant animations. It is a JavaScript library that enables front-end developers and designers. Because of this is a JS library, that’s why I am putting this program in the JavaScript category.

If you are thinking now how this animated cursor actually is, then see the preview given below.

Preview Of GSAP Spotlight Mask Over Texts

See this video preview to getting an idea of how this spotlight effect looks like.

https://webdevtrick.com/wp-content/uploads/gsap-spotlight.mp4?_=1

Live Demo

Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

Text Spotlight Cursor Hover Effect Source Code

Before sharing source code, let’s talk about it. First I have created a div for creating the cursor, and another div with 3 divs set for creating the spotlight, and finally created a div for the text. Also in the HTML file, I have linked other files like CSS, JS, and GSAP CDN. Inside the spotlight divs group, I have placed a similar class name in all divs and a unique for identifying each.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. With CSS. I have done basic works like size, position, margin, padding, etc. I gave different colors for the spotlight divs for proper visual, and styled the cursor div which I have created at first. Now I gave a selection color by giving values in CSS ::selection command.

There is few lines of codes in the JS file, because this program is based on a library. GSAP first detects the mouse movement using .addEventListener command, and the cursor div as the mouse pointer. After that stuck the spotlight shapes around the mouse cursor using its pre-built functions.

Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First file for HTML, second for CSS, and the third file for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Spotlight Cursor Text | Webdevtrick.com</title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel="stylesheet" href="style.css">

</head>
<body>

<div class="cursor"></div>
<div class="shapes">
  <div class="shape shape-1"></div>
  <div class="shape shape-2"></div>
  <div class="shape shape-3"></div>
</div>
<div class="text">
  <h1>Webdevtrick</h1>
</div>

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

</body>
</html>

<!DOCTYPE html>

<head>

<title>Spotlight Cursor Text | Webdevtrick.com</title>

</head>

<body>

</div>

<h1>Webdevtrick</h1>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
body {
  font-family: Montserrat, sans-serif;
}
body, body * {
  cursor: none;
}

.shapes {
  position: relative;
  height: 100vh;
  width: 100vw;
  background: #ff4949;
  overflow: hidden;
}

.shape {
  will-change: transform;
  position: absolute;
  border-radius: 50%;
}
.shape.shape-1 {
  background: #5cb85c;
  width: 650px;
  height: 650px;
  margin: -325px 0 0 -325px;
}
.shape.shape-2 {
  background: #fbb016;
  width: 440px;
  height: 440px;
  margin: -220px 0 0 -220px;
}
.shape.shape-3 {
  background: #1da1f2;
  width: 270px;
  height: 270px;
  margin: -135px 0 0 -135px;
}

.text {
  top: 0;
  left: 0;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background: #fff;
  mix-blend-mode: screen;
}

h1 {
  font-size: 100px;
  color: #000;
  margin: 0;
  text-align: center;
}
@media (min-width: 419px) {
  h1 {
    font-size: 100px;
    font-size: calc((0.0989119683 * 100vw + (58.5558852621px)));
  }
}
@media (min-width: 1430px) {
  h1 {
    font-size: 200px;
  }
}

.cursor {
  position: fixed;
  background: #e60023;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  will-change: transform;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  z-index: 10000;
}

::-moz-selection {
  color: #fff;
  background: #e60023;
}

::selection {
  color: #fff;
  background: #e60023;
}

/* Code By Webdevtrick ( https://webdevtrick.com ) */

body {

font-family: Montserrat, sans-serif;

}

body, body * {

cursor: none;

}

.shapes {

position: relative;

height: 100vh;

width: 100vw;

background: #ff4949;

overflow: hidden;

}

.shape {

will-change: transform;

position: absolute;

border-radius: 50%;

}

.shape.shape-1 {

background: #5cb85c;

width: 650px;

height: 650px;

margin: -325px 0 0 -325px;

}

.shape.shape-2 {

background: #fbb016;

width: 440px;

height: 440px;

margin: -220px 0 0 -220px;

}

.shape.shape-3 {

background: #1da1f2;

width: 270px;

height: 270px;

margin: -135px 0 0 -135px;

}

.text {

top: 0;

left: 0;

position: absolute;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

width: 100vw;

background: #fff;

mix-blend-mode: screen;

}

h1 {

font-size: 100px;

color: #000;

margin: 0;

text-align: center;

}

@media (min-width: 419px) {

h1 {

font-size: 100px;

font-size: calc((0.0989119683 * 100vw + (58.5558852621px)));

}

@media (min-width: 1430px) {

h1 {

font-size: 200px;

}

.cursor {

position: fixed;

background: #e60023;

width: 20px;

height: 20px;

margin: -10px 0 0 -10px;

border-radius: 50%;

will-change: transform;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

pointer-events: none;

z-index: 10000;

}

::-moz-selection {

color: #fff;

background: #e60023;

}

::selection {

color: #fff;

background: #e60023;

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
document.body.addEventListener("mousemove", evt => {
  const mouseX = evt.clientX;
  const mouseY = evt.clientY;

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


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

});

// Code By Webdevtrick ( https://webdevtrick.com )

document.body.addEventListener("mousemove", evt => {

const mouseX = evt.clientX;

const mouseY = evt.clientY;

gsap.set(".cursor", {

x: mouseX,

y: mouseY });

gsap.to(".shape", {

x: mouseX,

y: mouseY,

stagger: -0.1 });

});

That’s It. Now you have successfully created Text Spotlight Cursor Hover Effect With GSAP, Spotlight Mask Over Text. If you have any doubt or questions comment down below.

Thanks For Visiting, Keep Visiting.