Recreating The Hover Effect That Shocked Frontend Devs

This CSS & JavaScript hover effect blew my mind when I first saw it, and I saw a ton of requests to explain it. So in this video, we're going to try to recreate it from scratch!
Prepping for your frontend interviews? Use code "conner" for a discount on my course FrontendExpert:
www.frontendexpert.io/conner
TikTok: / connerardman
LinkedIn: / connerardman
Video/Coding Gear: www.amazon.com/shop/connerardman
Business/brands 👉 [e-mail]
Timestamps:
0:00 Particle Hover Animation Effect
0:18 Creating The Image Particles
1:26 Canvas Setup
2:22 Getting Image Data
2:55 Converting Pixels To Particles
5:04 Drawing Particles To The Canvas
5:56 Tracking The Mouse
6:21 Repelling Particles
9:25 Returning Particles
10:31 Load Animation
10:59 Performance Optimizations

[@boody8844]

Looks very nice!

[@vinothkumarthangavelu8724]

This really awesome, I just coded along with your video but It didn't worked. Also its has no error. Initially dot's like line (" \" ) appeared in TOP to BOTTOM(Y axis to X) after Image appeared with not action. And then nothing happened. Can I get a github link for learning.

[@higherpurpose1212]

Care to create full, mid-complexity React projects with backend, like maybe MERN projects? Thanks

[@nested9301]

Impressive now create an npm package for that 😂❤

[@And1997Ruz]

I was literally showing this to my friend 3 days ago, and I've been wondering how it's done since the Frontend Expert's launch.
Looks stunning

[@johnnycoding1423]

I just write a react component for this animation according to this video, really brilliant. thank you for sharing!

[@rnwonder107]

Create an npm package for it

[@abubakarsadeeq2974]

It will be helpful if you can share it with people like me.

[@rubenzafratraver6819]

did you manage to do it??

[@johnnycoding1423]

@@abubakarsadeeq2974 working on it!~

[@johnnycoding1423]

@@rubenzafratraver6819 working on it!~

[@mirjalol_shamsiddinov]

💖💖💖💖thanks

[@scooterman9058]

i have a really good computer but still for some reason this code you wrote here lags a lot when hovering over the picture + moving the particles around, but when its on the frontend expert site there is no lag

[@ConnerArdman]

Yeah IIRC there were issues with that when they first made the FrontendExpert one and it's since been optimized a bit. The simplest optimization that comes to mind would be to just make the individual circles bigger and/or lower the frame rate so there's less calculations to make. You could also try to be smarter about which ones need to be updated, when they need to be updated, etc.

[@alexfrozen]

Ofc it will lag. Making optimization mentioned above, about resting pixels, a good way to spend a time to nowhere. Any rasterization algos in JS, per pixel jobs, a very bad idea. Like smashing thausands stones with one hummer. They should be placed in special instrument like pressing mechanism. I mean GPU. You HAVE TO use shaders or don't do it at all. And even more, you MAY NOT teach to hit every stone by hammer, it's a kind of crime in development.

[@thegoatoffootballmessi]

Hi
Bro make immediate video on how to install a package on atom ide please.

[@shichii4690]

omg I wish I can be as good as you someday ❤

[@ConnerArdman]

Study and practice enough and you can be better 👌

[@kusalghosh7848]

Where can I learn this much of animation development?

[@ConnerArdman]

We have a free CSS animation video on FrontendExpert (linked in the description) that can be a good starting place just to learn the basics of how animations work. Beyond that, I'm sure there's some great tutorials on RUclips and whatnot, but it mostly comes down to practice. There's nothing all that unique about animation code compared to other DOM manipulation code. I think the difficulty is more about deciding what to code to make the design look good, which beyond some design principles is mostly a skill learned through practice.

[@kusalghosh7848]

@@ConnerArdman thanks sir

[@alexfrozen]

​​@@kusalghosh7848best way to study this magic is shadertoy (google it). Also I can recommend "The Art of Code" youtube channel and work of Inigo Quilez. He has a lot of publications and hints over the web. And forget about CSS/JS tricks. They are specialized for layout, coloring and compositional purposes. Maybe some basic color/size/transform transitions. Using CSS/JS tools for pixelwork, it's huge shame in the eyes of real experts, but huge respect from stupid (sorry) people. Last one will give a lot of lies like "you're smart" and some and these lies can bury you alive in illusions. Silent degradation with proud face.

[@abubakarsadeeq2974]

How I wish I can get the source code

[@codewithsehran]

I'm finding something like that

[@milancodes]

who was responsible for this incredible idea on the frontendExpert site?

[@blender1188]

Frontend devs may like it (me included) but the average user doesn’t care about this stuff at all. I have seen sites with all bangs and whistles being replaced with plain sites because of this.

[@ConnerArdman]

True, but this is a website literally for frontend developers… Gotta design to your target demographic.