MENU

Fun & Interesting

How to use Blend Modes with a Custom Cursor using React and GSAP

Olivier Larose 8,197 lượt xem 1 year ago
Video Not Working? Fix It Now

A website tutorial featuring a moving cursor on mouse move, colored with CSS blend mode difference, made with React and GSAP. Inspired by https://trionn.com/

Source Code / Live demo:
https://blog.olivierlarose.com/tutorials/blend-mode-cursor

00:00 Intro
00:26 Moving the cursor
5:33 Easing on the cursor
10:59 Adding CSS Blend Mode
11:54 Animating on Hover
15:09 Adding multiple cursors
22:36 Outro

More animations: https://blog.olivierlarose.com/
Follow me on Twitter: https://twitter.com/olivierlarose_
Discord Channel: https://discord.com/invite/2QPNYtazQq

Thanks for watching!

#react #nextjs #awwwards #gsap #framer #motion

Comment