Tab filtering animation with view transitions / HTML, CSS & JS

iCodeThis 👉 https://icodethis.com/?ref=kevin If you decide to go for a PRO account, make sure to use the coupon KEVIN at checkout for an additional 10% off! Also, this is an affiliate link, which means that I’ll receive a small commission in case you do go for the PRO account. It comes at no extra cost to you, and helps support my channel 😊. As for this video, in it I look at how we can create a filter list, first getting the buttons to update when we click on them, then having those filter what events are showing, and finally adding an animation. The first version of the animation is a simple fade, and then we finish it off with a quick update that makes the animation much better, and thanks to the new View Transitions API, the animations are all very easy to do! 🔗 Links ✅ Finished code: https://codepen.io/kevinpowell/pen/GRzxybd/c5c073666a8225c2c8f2fadd4d7c049b?editors=1010 ✅ iCodeThis: https://icodethis.com/?ref=kevin (if you go for a PRO account, use KEVIN at checkout for 10% off!) ✅ THAT Conference Texas: https://thatconference.com/tx/2024/ ✅ Chris Coyier's article that I mentioned: https://chriscoyier.net/2023/01/16/intuitive-list-item-transitions-with-the-view-transitions-api/ ⌚ Timestamps 00:00 - Introduction 00:31 - The HTML 02:32 - Starting the JS 03:52 - iCodeThis 05:45 - Updating the active button 12:49 - Filtering the events 20:12 - Adding the dividers 23:14 - THAT Conference 24:12 - Adding a fading animation 27:38 - Improving the animation #css -- Come hang out with other dev's in my Discord Community 💬 https://discord.gg/nTYCvrK Keep up to date with everything I'm up to ✉ https://www.kevinpowell.co/newsletter Come hang out with me live every Monday on Twitch! 📺 https://www.twitch.tv/kevinpowellcss --- Help support my channel 👨‍🎓 Get a course: https://www.kevinpowell.co/courses 👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome 💖 Support me on Patreon: https://www.patreon.com/kevinpowell --- My editor: VS Cod