Categories
Website Design

Awesome Mouse Spotlight Effect in JS & GreenSock [Video]

Watch/Read More

Awesome Mouse Spotlight Effect in JS & GreenSock

http://bit.ly/3NTrTXY👈 Learn UI/UX Today. Use “UI2022” for 22% Off!
— Today, I’m going to show you how to create a cool spotlight effect in greensock and javascript. It follows the mouse (smoothly, with the help of Greensock) and also grows. The effect requires duplicating a section of content, changing one of them in some drastic manner, and using a clip-path to create the spotlight.

This tutorial is inspired by this awesome article:
https://tympanus.net/codrops/2021/05/04/dynamic-css-masks-with-custom-properties-and-gsap/

Codepen demo for this project:
https://codepen.io/designcourse/pen/QWxppgv

0:00 – Intro
0:47 – HTML
2:29 – CSS
6:01 – Mouse Tracking with JS
11:00 – Reveal Effect
12:56 – End Result

Let’s get started!

#frontend #javascript #css

– – – – – – – – – – – – – – – – – – – – – –

Subscribe for NEW VIDEOS!

Learn UI/UX: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro’s Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

– – – – – – – – – – – – – – – – – – – – – –

Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website Designcourse.com.

Come to my discord server or add me on social media and say Hi!