Kevin Powell | CSS-only particle animations @KevinPowell | Uploaded July 2023 | Updated October 2024, 3 minutes ago.
My friend Amit Sheen has come to join me once again, this time looking at how we can do particle animations with CSS, by looking at how we can make a 3D scene with a laser cutting a panel, with sparks flying off while it’s cutting the panel.
Not only was it a fun effect to learn how to make, but I picked up a few very good tips and tricks related to animations in general along the way.
🔗 Links
✅ The finished codepen: codepen.io/amit_sheen/pen/BaGxRqj
✅ Amit made an improved version here: codepen.io/amit_sheen/pen/NWEEyYM
✅ Amit’s CodePen’s: codepen.io/amit_sheen
✅ Amit’s Twitter: twitter.com/amit_sheen
⌚ Timestamps
00:00 - Introduction
01:10 - Amit’s inspiration for creating this
02:19 - Creating the scene
06:08 - Creating the laser
07:52 - Creating the panel
10:39 - Making the scene 3D
12:19 - Animating the laser
20:46 - Creating the sparks
37:28 - Making the cut piece fall
#css
--
Come hang out with other dev's in my Discord Community
💬 discord.gg/nTYCvrK
Keep up to date with everything I'm up to
✉ kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 twitch.tv/kevinpowellcss
---
Help support my channel
👨🎓 Get a course: kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome
💖 Support me on Patreon: patreon.com/kevinpowell
---
My editor: VS Code - code.visualstudio.com
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Twitter: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
My friend Amit Sheen has come to join me once again, this time looking at how we can do particle animations with CSS, by looking at how we can make a 3D scene with a laser cutting a panel, with sparks flying off while it’s cutting the panel.
Not only was it a fun effect to learn how to make, but I picked up a few very good tips and tricks related to animations in general along the way.
🔗 Links
✅ The finished codepen: codepen.io/amit_sheen/pen/BaGxRqj
✅ Amit made an improved version here: codepen.io/amit_sheen/pen/NWEEyYM
✅ Amit’s CodePen’s: codepen.io/amit_sheen
✅ Amit’s Twitter: twitter.com/amit_sheen
⌚ Timestamps
00:00 - Introduction
01:10 - Amit’s inspiration for creating this
02:19 - Creating the scene
06:08 - Creating the laser
07:52 - Creating the panel
10:39 - Making the scene 3D
12:19 - Animating the laser
20:46 - Creating the sparks
37:28 - Making the cut piece fall
#css
--
Come hang out with other dev's in my Discord Community
💬 discord.gg/nTYCvrK
Keep up to date with everything I'm up to
✉ kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 twitch.tv/kevinpowellcss
---
Help support my channel
👨🎓 Get a course: kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome
💖 Support me on Patreon: patreon.com/kevinpowell
---
My editor: VS Code - code.visualstudio.com
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Twitter: twitter.com/KevinJPowell
Codepen: codepen.io/kevinpowell
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
