CodeNewbie Community 🌱

Cover image for Custom cursor with Greensock
Dezigner Bay
Dezigner Bay

Posted on • Updated on

Custom cursor with Greensock

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

Detailed information

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>
Enter fullscreen mode Exit fullscreen mode

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.

Screenshot (381)

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;
}
Enter fullscreen mode Exit fullscreen mode

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});
});

Enter fullscreen mode Exit fullscreen mode
gsap.set('.follower',{xPercent:-50,yPercent:-50});
gsap.set('.cursor',{xPercent:-50,yPercent:-50});
Enter fullscreen mode Exit fullscreen mode

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});
Enter fullscreen mode Exit fullscreen mode

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.

Demo

Top comments (7)

Collapse
 
damion_towne profile image
Damion Towne

Residential solar panels come in a variety of sizes and configurations, depending on the needs of the homeowner. Some homeowners may opt for rooftop installation, while others may choose a ground-mounted system. I would recommend this industrial solar panels Charlottesville to buy industrial solar panels at very cheap prices. The size of the system will depend on factors such as the homeowner's energy needs, the available space for installation, and the budget. One of the benefits of residential solar panels is that they are low maintenance.

Collapse
 
damion_towne profile image
Damion Towne

Civil engineering is the application of engineering to the design and construction of built environment. The civil engineering chicago generally work in the field of public or private infrastructure and facilities. Their works are a combination of architecture, urban planning and landscape architecture. They take into consideration the impact of their designs on people, communities, and other organisms on Earth.

Collapse
 
felixandrea profile image
felixandrea

Here's a quick tutorial on how to change the background color of a website dynamically by choosing a color from the custom color picker. The main idea is to use CSS variables to store and change the background color.
Highlights: rice purity test

  • Use Google Fonts fonts to decorate the website
  • Simple HTML structure with 4 main divs
  • Use the :root CSS variable to define the default background color
  • Use JavaScript to listen to the input event of the color input and update the CSS variable value accordingly
Collapse
 
salmawisoky profile image
salmawisoky

The game's Drift Boss graphics are vibrant and engaging, providing an immersive experience for players. The sound effects and background music add to the overall excitement of the game, making it even more enjoyable.

Collapse
 
niaernes profile image
niaernes

Geometry Dash Game is a game the whole family can enjoy together. It's a great way to bond and create some hilarious memories. ‍‍‍

Collapse
 
larsenlola profile image
Johnathan Dorsey

GSAP provides options like timeline control, drift hunters, easing, keyframes, callbacks, etc. to finely customize animations.

Collapse
 
ratkefletcher profile image
ratkefletcher

That's cool. How might you give the dot a straightforward click animation? Is this doable with GSAP (maybe shrink the dot a little onclick)?

hill climb racing