Custom Cursor with GSAP 2020

Green Sock Animation Platform (GSAP) that helps you to build up an high performance animations.You can animate CSS properties, SVG, React, canvas, generic objects and many more things.(  20x faster than jquery).I recommended reading the documentation carefully. Everything you want about the gsap, clearly explained in the documentation.You can install the gsap by using CDN, NPM, YARN, or Direct Download(ZIP file).

In this small tutorial,we show you to create a custom cursor using  GSAP.gsap.set() and gsap.to() methods are used for creating this animated custom cursor.

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() method used for centralizing the Follower and cursor.
gsap.to() method used for taking the positions of the Follower and cursor.

Hope this will be helpful for you and don’t forget to subscribe our channel. Every week we bring a new video to you .then keep in touch with us.If you have any questions  regarding this video feel free comment below.

Youtube – https://www.youtube.com/channel/UCEZ2SM-qyXzwskpmRrCAvxQ

Leave a Reply

Your email address will not be published. Required fields are marked *