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
- How to create Spotlight Cursor Text Screen
- Create Cursor Text Screen
- how to add Spotlight effect
- How to use GSAP – GreenSock
- 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 https-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.
* {
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;
}