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

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

⌚ 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

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

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.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[bseddonmusic]

Thanks for making the video about this feature.

Small point: forEach has more than one parameter. The second one is the index of the current item in the original list so your function at around 32 minutes can be:

conferences.forEach (conference, conferenceIndex) => { = `conf-${conferenceIndex}`; } );

Then there's no need for the additional variable or to update it using prefix increment operator. A possible 3rd param for the forEach function is the original list.

[kerrykreiter]

It’s not enough to watch Kevin’s amazing videos…you absolutely must read the insightful comments. Thank you Kevin for creating one of the very best YouTube channels for devs!! And a big thank you to all your brilliant viewers that take the time to share their knowledge!

[Allformyequine]

the 'has' selector... It's cool and it makes me happy! AGREED!

[TobiSGD]

For the future, I would recommend to use "e.currentTarget" instead of "e.target". If you add content to the buttons, like a span or an icon, e.target might point to them instead of the button when the user clicks on them, while e.currentTarget always points to the element that has the eventlistener.

[mahmudrashid]

You should upload more JavaScript videos. I really like the way you explain things. I've learned a lot from you.

[rajaulislamratul]

we need more javascript content from kevin, amazing video as always❤❤

[clevermissfox]

Heck yea, I’ve done this icodethis challenge already! Since I have a lot of it done already I’m gonna have to do this! Will have to rework the html. Love the platform, so awesome to see a shoutout that is so thorough.

[GerryDanen]

I downloaded the final codepen version, and then replayed the video. Very slick!
Thanks Kevin.

[tsarprince]

33:00 instead of managing the index there, we can just use the second parameter of forEach which is the index precisely.

[clevermissfox]

So excited to see the view transition bit in here! I’m watching videos that exist on the api and they aren’t great. Reading the documentation helped. Need that KP touch to help make it make sense !

[clevermissfox]

Just a heads up for ppl that are following along with the viewTransition

28:37 when KP makes the view-transition-old(root) and the view-transition-old(new), it should be view-transition-old(root) and view-transition-new(root).

Just put the "new" in the wrong spot. ❤ not sure if the code linked still has this in there or not but just fyi!

[coreo]

Ooh yeah this is awesome. I'm going to use this in one of my upcoming projects! Much thanks for the breakdown

[spaceyraygun]

When toggling "active" off, I usually skip the "find current active" step and just remove it from all possible elements, even if they don't have it applied. That strategy removes the need for logic and also helps if more than one element is active for some weird reason. If there is a good reason to specifically target the active element, I'd love to hear it. If there were a ton of elements, I might target the active element, but for just a few, I think it's insignificant for speed.

[Allformyequine]

I secretly love it when Kevin does JavaScript !

[cristo_sal]

Pure quality, as always... Thank you for the content.

[EpKjelltzer]

Great video Kevin! You explained this really well!

One thing I would change is using a mutable variable to track the index of the conference list item when assigning them view transition names. Instead of having a separate variable that you have to update, you can use the second parameter of the forEach callbackFn, which is the index of the current element. For example: "conferences.forEach((conference, index) => { ... `conf-${index}`; }".

[dogoku]

I would recommend using radio inputs instead of buttons. Sure it's a bit more styling, but you don't need any JS to activate a button and you have a value attribute instead of a data attribute and you listen to change event instead of click.

[SeanGoresht]

The approach here could have been simplified and much more accessible by using radio buttons instead of <button>s; we could use the value attribute on each radio button to determine the filtering, removing the need to do any active styling (we would use :checked instead). I'd really advise against using pointer-events: none on buttons, and would far more advise considering using radio buttons within a <form method="GET"> to reduce the code here and make the experience more accessible.

[mubiruangel]

Am about to complete 100 challenges in icodethis. I completed that challenge which you are demonstrating to.
Thanks for the new tricks

[EricFressange]

ViesTransition look great.
Just a suggestion instead of e.target you can directly use button because you are using arrow functions