Demo
Hi guys, in this short tutorial, you're going to learn how to create an animated custom cursor with GSAP and basic HTML and CSS. Ok, then, what's this GSAP called?
What is GSAP ?
Greensock Animation Platform(GSAP) is a JavaScript library for creating high-performance animations. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects...anything JavaScript can touch!.GSAP has been tested across all major web browsers – including legacy fares such as Internet Explorer. All browser-related tweaks and fallbacks have already been integrated into the platform.
Why GSAP ?
- Crazy fast
- Freakishly robust
- Compatible
- Animate anything
- Lightweight and expandable
- No dependencies
- Advanced sequencing
Ok.let's start the coding then.
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Custom Cursor</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="cursor"></div>
<div class="follower"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
<script src="main.js"></script>
</body>
</html>
The first thing you need to do is, add gsap.min.js to your index.html.To Install GSAP, you can use the following methods.
after that, import style.css and main.js to your index.html.
style.css
*{cursor: none;}
body{
background-color:black;
overflow: hidden;
}
.cursor{
position: fixed;
top: 0;
left: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
z-index: 2000;
user-select: none;
pointer-events: none;
}
.follower{
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: #6eff00;
border-radius: 50%;
opacity: 0.7;
user-select: none;
pointer-events: none;
}
main.js
gsap.set('.follower',{xPercent:-50,yPercent:-50});
gsap.set('.cursor',{xPercent:-50,yPercent:-50});
var follow = document.querySelector('.follower');
var cur = document.querySelector('.cursor');
window.addEventListener('mousemove',e => {
gsap.to(cur,0.2,{x:e.clientX,y:e.clientY});
gsap.to(follow,0.9,{x:e.clientX,y:e.clientY});
});
gsap.set('.follower',{xPercent:-50,yPercent:-50});
gsap.set('.cursor',{xPercent:-50,yPercent:-50});
Here, the gsap.set() methods always set the follower and the cursor centered on each other when we move the cursor.
Watch the Demo, then you can understand it clearly.
gsap.to(cur,0.2,{x:e.clientX,y:e.clientY});
gsap.to() specifies the values to which the object is to be animated. Here,0.2 is the duration time of the cursor moves.
The 'clientX' property returns the horizontal mouse pointer coordinate when the mouse event is triggered.
The 'clientY' property returns the vertical mouse pointer coordinate when the mouse event is triggered.
Latest comments (16)
Flux.1 Kontext Image Generator | AI-Powered Context-Aware Image Creation. Generate stunning, context-aware images with Flux.1 Kontext — an advanced AI model designed for real-time, intelligent image generation. Perfect for creators, developers, and marketers seeking high-quality visuals tailored to their ideas.
AI tattoo generator create bespoke tattoo designs within seconds. Provide a detailed description of your concept, and our state - of - the - art AI will generate distinctive artworks precisely tailored to your requirements.
Looking for top-quality dental implants in Narre Warren? Glowing Smiles Dental offers expert dental implant services to restore your smile and improve oral health. Our experienced team provides personalized care in a comfortable and modern setting. Whether you're missing a single tooth or need multiple implants, we ensure precise, durable results that blend seamlessly with your natural teeth. Trust Glowing Smiles Dental for a lasting solution and a confident, beautiful smile!
crazy chicken 3d is designed for players who enjoy lighthearted competition and whimsical gameplay.
ToothFairyAI offers cutting-edge AI solutions in Australia, providing businesses with autonomous AI agents that enhance efficiency and productivity. From AI research and financial analysis to customer retention and compliance, our intelligent agents handle complex tasks 24/7. With seamless system integration, real-time insights, and privacy-first intelligence, ToothFairyAI empowers businesses to scale without increasing headcount. Experience the future of AI with custom, private AI solutions today! AI Agents in Australia
sprunki 2 has something for everyone, from casual gamers looking for a fun journey to serious gamers looking for a challenge. It stands out in the independent game scene because it focuses on discovery, friendship, and creativity.
The Geometry Dash community is one of the most creative. Thousands of custom levels keep the game fresh and exciting.
Great article! The insights shared are really valuable for anyone looking to improve their coding skills. As a technical professional, I always emphasize the importance of clean, efficient code and staying updated with the latest best practices. If you're working on multilingual projects or need translation support for technical documentation, International Tercüme Bürosu offers expert translation services, ensuring accuracy and clarity across all technical fields. Keep up the excellent work!
Great article! The insights shared are really valuable for anyone looking to improve their coding skills. As a technical professional, I always emphasize the importance of clean, efficient code and staying updated with the latest best practices. If you're working on multilingual projects or need translation support for technical documentation, International Tercüme Bürosu offers expert translation services, ensuring accuracy and clarity across all technical fields. Keep up the excellent work!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.