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-home-cursor Test the final project: https://cuberto-cursor.netlify.app/ Cuberto: https://cuberto.com/ Dribbble posts used: https://dribbble.com/shots/14334987-ShipBob-Branding-Video https://dribbble.com/shots/9684522-IOCO-Biocomputer https://dribbble.com/shots/10005588-PepsiCo-App-Interactions Lerp Functions and More: https://www.trysmudford.com/blog/linear-interpolation-functions/ Request Animation Frame: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame Parcel JS: https://parceljs.org/ #GSAP #JavaScriptAnimations #Parcel Social Links: https://dribbble.com/Wrongakram https://www.instagram.com/wrongakram https://twitter.com/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 :)
Download
1 formatsVideo Formats
Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.