Cursor Animations using GSAP | HTML, CSS & Javascript
Whats up everyone! Hope you all are doing well :) In this video we are using html css and javascript to create an amazing cursor animation inspired by cuberto.com. Let me know what you guys think in the comments. Have a great day!
▬ Timestamps ▬▬▬▬▬▬▬▬▬▬
0:00 - Intro
1:13 - Grab project files
1:24 - Project Breakdown
3:16 - Build HTML & CSS for cursor
5:43 - Add Javascript to animate cursor
15:16 - Scale media cursor on hover
20:23 - Change media for cursor
24:04 - Add blend effects
25:53 - Add Loading Animation
Code Files:
https://github.com/wrongakram/cuberto...
Test the final project:
https://cuberto-cursor.netlify.app/
Cuberto:
https://cuberto.com/
Dribbble posts used:
https://dribbble.com/shots/14334987-S...
https://dribbble.com/shots/9684522-IO...
https://dribbble.com/shots/10005588-P...
Lerp Functions and More:
https://www.trysmudford.com/blog/line...
Request Animation Frame:
https://developer.mozilla.org/en-US/d...
Parcel JS:
https://parceljs.org/
#GSAP #JavaScriptAnimations #Parcel
Social Links:
https://dribbble.com/Wrongakram
/ wrongakram
/ wrongakram
https://github.com/wrongakram
New to the channel?
Hey there my name is Akram, I am a Front end developer and UI Designer. I'm here to hopefully educate people on how to code projects that actually look good. My stack mainly consist of react.js and node.js. For UI design I like to use adobe XD as my go to. If you have any suggestions on tutorials you would like to see feel free to DM me :)
Watch video Cursor Animations using GSAP | HTML, CSS & Javascript online without registration, duration hours minute second in high quality. This video was added by user Akram 12 October 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 35,918 once and liked it 1.5 thousand people.