Modern CSS for Creative Developers

How can we craft delightful, fluid experiences using just CSS? What does the View Transitions API unlock for us? How can Scroll-Driven Animations change the way we think about storytelling and interactivity on the web? And how do these modern tools impact performance, accessibility, and user experience?

In this talk, we’ll explore the latest and most exciting CSS features that let creative developers push boundaries, without sacrificing maintainability or sanity. With practical examples, visual demos, and ideas you can take straight into your projects.

Transcription

CYD STUMPEL:

(Applause)

So hi, I’m Sid, or hello, because I’m Dutch, I also say hello.

I’m a creative developer and I’m a teacher from Amsterdam.

So I’m a freelancer, so I create websites for smaller companies, bigger companies, fish, you know, the usual.

Here’s some more of my work.

(Video playing)

So, here’s my website.

So, I’m not a video editor, but I created that.

I basically use motion to make websites more fun and engaging, or I try to, at least.

I’m also a part-time teacher at the University of Applied Sciences, where I was first a student of Vasilis, of course.

I teach at a two-year associate degree called Frontend Design and Development, and also at the Minor Web.

My students are the reason I’m standing here today, because we really encourage our students to try new techniques, because hopefully by the time they’ve graduated, they’ll be able to use them in the wild.

So students were asking me questions that I didn’t have the answers to, and it was not only really bad for my ego.

It was also something that made me very curious, which we talked about yesterday.

So I finally started looking into them, and I was kind of pleasantly surprised by how easy they have made very complex concepts that I used to have to do with JavaScript.

So it all kind of escalated in me rebuilding my entire portfolio with them.

That was not necessarily the plan.

But I’ve kind of been doing that for the last five years.

So new year, new me, or new year, new portfolio.

It’s kind of the same thing for me.

So this talk is generally about how CSS is awesome, but specifically about modern CSS.

And I’ll be talking about two relatively new CSS features, scroll-driven animations and view transitions.

Small disclaimer before we start, because they are not well supported yet.

So for example, this is the support for scroll-driven animations.

They are not supported yet in Firefox or in Safari.

And for view transitions are not yet supported in Firefox.

But they hopefully will be by the end of the year.

And then only the new people, the people with the updated browsers can still use it.

So scroll animations have been around for years, and they’re pretty much synonymous with creative development in my eyes.

So they have always required JavaScript to record the scroll position.

And this can cause some issues when you do it incorrectly, like lagging animations or heavy recalculations on resize, or heavy feeling websites overall.

And unresponsive websites in low internet environments.

We’re all used to high-end devices and high internet speeds.

So coming to a conference like this and having no internet most of the time is probably a good thing.

People go to conferences more often.

Even if you do it well, JavaScript still runs on the, in my mind, mystical main thread.

And that’s kind of the scary place where browsers process user events, CSS repaints and reflows.

So blocking the main thread can delay other user interactions, but it can also make your website unresponsive.

So in theory, moving scroll animations in JavaScript to its own main thread with scroll-driven animations will make your websites faster and more performant.

So everyone knows keyframe animation.

At least all the devs will know this.

This is how you do keyframe animation in CSS.

And scroll-driven animations are built on keyframe animation.

But instead of time determining the progress of the animation, we’re going to use the scroll position of the user.

So we’ve added animation timeline with a value of view in this case.

And that will determine the start and the end position of the animation.

So at this moment, there are two types of scroll-based animations that you can use in Chromium browsers.

There are a few end scroll progress timelines.

And in short, scroll progress timelines have a start and end value that’s based on the scrollable container.

So by default, that would be the body.

And you can also use it for a horizontal carousel, if that’s your thing.

And view progress are the start and end values that are determined by the element’s position in the viewport.

So scroll progress timelines are kind of perfect for carousels.

And progress timelines are great for everything else.

As you may be aware, I don’t really like carousels.

So a very powerful feature of view timelines as well is that you can use a different element to be the trigger of the animation.

Which is pretty cool.

It kind of works like GSAP’s scroll trigger.

So both timelines have the animation range property.

Which has some kind of weird keywords, in my opinion.

So there’s cover, contain, entry, exit.

Those kind of words.

So you can use them like you can use exit and contain.

And then you can see what happens.

This is a tool that Bramus Van Damme built.

He’s kind of like the ultimate scroll-driven animation guy, I think.

But I thought this was still kind of confusing, so I wanted to draw it out.

And I don’t really recommend mixing those keywords if you want to keep your code maintainable.

So this is actually the four keywords drawn out.

So for the entry and exit keywords, those are the ones on the right.

The element size kind of determines the range or the time of the animation.

And for contain and cover, it’s mostly determined by the viewport.

So when you look at the contain animation, you can see that it starts when the element stop hits the bottom of the viewport, and you can see that it ends when the element stop hits the top of the viewport.

So it could have been just top, top, top.

Like keywords like that instead of contain and cover.

Cover is one that I actually kind of do like as a keyword, because it really does what you want.

As long as this element is in view, it will be animating.

So it starts when the element stop hits the bottom of the viewport, and it ends when the element’s bottom is out of sight of the viewport.

For entry, it kind of starts the same as the first two.

So it starts when the element hits the bottom of the viewport, and it ends when the element is completely visible.

And for the exit one, it starts when the element hits the top of the viewport, and it ends when the element is completely invisible.

So in theory, kind of useful.

So Jeremy Keith gave a talk at CSS Day.

We’ve talked about him before.

I really liked that.

He’s a great guy.

He talked about libraries and coding languages that go out of style.

And he said it’s the mark of a great library that has become so successful that it’s no longer needed, because the standards itself have made it obsolete.

So it’s kind of wild to me that browsers seem to be reinventing the wheel all of the time.

So even if CSS techniques can replace parts of libraries like GSAP, Scroll Trigger, in the future, we should still acknowledge that we’re standing on the shoulders of giants, and we should make use of existing patterns, which will also encourage GSAP users to try out stuff like this.

So that was my rant.

One more thing.

This is essential if you’re working with scroll-driven animation.

There are no DevTools helpers at the moment, so debugging is a real pain in the ass.

That’s a QR code to the browser extension that Bramus Van Damme created, which helps you to at least see that there is something happening.

You just still can’t really tell what.

But it helps a lot.

So good as that.

So I also wanted to show you what you can kind of do.

I’m glad my CodePen is working, switching the views.

So you can create, like, parallax-y animations like this.

So this is all CSS.

This entire animation is just CSS.

The only JavaScript that’s here is to make the buttons work.

So just so you know.

And if we get into this, if we look a little bit closer, the most important thing about this CodePen is probably the first reduced motion query.

Don’t add animation if people have reduced motion preference.

And it’s very easy to do.

It’s just encase your code in one single thing.

So I’m setting the animation timeline to view, which means that the image tag is going to be the thing that determines the start and end position.

So there’s an image.

It’s a little bit ugly, this code.

Like, I don’t think Vasilis will approve of this code.

I’m sorry, Vasilis.

So there’s a div with a class image, and there’s an image inside.

But I swear, it has a purpose.

It has a purpose.

Don’t worry.

So I’m using that for the view timeline, and I’m setting the animation range to cover.

So as long as the element is in view, it will animate.

So that will create this nice parallax-y feel.

And I’ve set an animation name of parallax, which you can find right below.

So I’ve set a transform, the translate y starts at zero, and then it goes to a CSS variable, which kind of defeats the whole main thread thing.

But let’s forget about that.

It’s much easier to use variables.

So I’m trying to create something random.

So I’ve used UNTH of type, and I chose random numbers.

Another colleague at the University of Amsterdam said, you should use prime numbers.

And I was like, why?

No.

Just figuring things out.

So I’ve changed the size with grid.

Matthias, love grid.

With the spans, I’ve changed the width of the elements a little bit randomly.

And I’ve also changed the translate variable a little bit randomly.

And that’s why some elements are going faster, and some elements are going slower.

So I’ve also created this clipped parallax, which this is why there’s a diff around it.

Because the image inside is now also translating.

So both the image class and the image image are translating.

So maybe not the best class name.

I’ve created this scaled parallax, which is something that you may have seen in the show reel I just showed.

I did that one with JavaScript, but it’s kind of possible to do it with CSS now, if you don’t care about Firefox or Safari, it’s fine.

So let’s do it.

And then there’s the crazy parallax, which is like the Dutch version of crazy.

Like be normal, then you’re crazy enough, because it’s not that crazy.

It’s just a little blur that’s added.

But it’s kind of nice.

So for the scale animation, I think it’s nice to show the key frames as well.

If you follow the QR code in the corner, if it’s capturable, you can go to this code pen and check it out later in detail.

But I’m changing from a scale of 0.5 to a scale of 1 and back to a scale of 0.5.

Because something that’s kind of new in CSS as well is that you can separate your transform properties.

You don’t have to just use transform anymore.

You can also use just scale or just translate.

But I’m lazy, so I just use them all through each other.

Okay.

So another thing that is great for scroll driven animation is also great for a pair animation.

So animations that get into view and then do stuff.

So I’ve used this is where I’ve used the linked element.

So I’ve set a few timeline name of section on the actual section.

And I’m using it as the animation timeline in my image.

And it still has an animation range of cover.

So as long as the section is in view, the images will animate, which is great.

This is stuff you want.

So it works great, right?

Well, it works great as long as you’re animating HTML elements and not something like JavaScript, because it’s a CSS module.

There’s also a JavaScript module.

But I was talking in the break with some people, a lot of creative devs have said I don’t want to do CSS anymore, because it runs on a separate thread.

So the thing that we thought was, like, great about being on a separate thread is actually for some JavaScript pros, it’s disturbing, because you’re not certain that a certain thing will happen at a certain time.

So that’s something.

It works great if you want an animation to play every time you scroll past it.

You can’t just set it to animate only once.

It animates every time.

And it works great as long as you don’t need a scroll-triggered animation.

So a scroll-triggered animation would animate at a certain point instead of on a range between two points.

So you can’t do that yet.

But I’ve heard word that that’s coming in the future.

So kind of abrupt, but that’s all I wanted to share about scroll-driven animations, because we need to go on to view transitions.

In its simplest form, view transitions can add crossfades to your pages.

So like this.

You probably can’t really tell.

Don’t worry.

I’ll show you a better version later.

But you can also move the entire page around and give it, like, an app-like feel.

This is very easy to do with view transitions.

Once you’ve read the documentation a little bit.

But in its most complicated form, we can do stuff like this.

We can do page transitions and stuff.

This is a project I’m working on for a Dutch photographer called Michiel Rotgans.

It was designed by Tim Borst, who is also kind of my mentor.

So kind of full circle.

View transitions are basically transitions between two states.

So this can be used for page transitions, but also loading more animations, filtering, sorting, and much more.

So view transitions used to only be available on SPAs or single page apps that handle single page apps are apps that handle routing through JavaScript instead of just using links.

And they are now also available in what browser vendors like to call MPAs, or multiple page apps.

But we used to call them RFWs, or regular fucking websites.

So, all you need to do to make the simplest form of view transitions work between your pages is just this code.

This will add nice crossfade between your pages.

So add view transition, navigation, and set it to auto.

There will probably be more properties in the future, but for now, this is about it.

You can also add types.

I personally don’t really understand how that works.

So to make the more complicated version work, I’d like to talk about Flip and why we kind of don’t need Flip anymore.

But Flip is an animation technique thought up by Paul Lewis.

It stands for first, last, invert, play.

So what kind of happens is it records the start transforms of an element, it applies end transforms, and then it quickly inverts those transforms to make it look like it never moved at all.

And then the removal of those inverted transforms is what is actually animated.

So this was kind of revolutionary a couple years ago.

And it still is, because it’s still what’s used under the hood.

So for view transitions, kind of the same thing happens.

So we take a screenshot of the first state, we take a screenshot of the second state.

So it’s actually like a screenshot, I’m not kidding.

And then it calculates if there are any changes in position, size, or rotation between those two states.

And there is not by default, because it’s the same size picture.

And then it transforms and crossfades between those two states.

So a little bit boring, but yeah.

So let’s go into this simple example.

Opening it up for real now.

Getting the DevTools ready.

Are you ready to get nerdy, guys?

Nice.

So for view transitions, it’s great to have the animations panel open.

And if you don’t know where that is, it’s right here.

All right.

And we can slow down animations with the animations panel.

So that’s kind of great.

We can finally see that crossfade I was talking about.

Oh, that’s not the crossfade.

Now we have to wait.

Okay.

Crossfade.

I told you it was there.

But we can also see the moving animation.

And we can just do it on the same page, but that’s kind of a bug.

It’s not my bug.

It’s the browser’s bug.

But as you can see, is this big enough, guys?

Bigger?

A little bit bigger?

About so.

Oh, now we have to do it again.

Let’s go.

Oh.

I’ve paused it.

Okay.

And now I’m pausing it again.

So we have a view transition pseudo element in the browser now while the view transition is loading.

And inside of that pseudo element, there’s going to be view transition groups with every element that you’ve named.

And by default, you don’t have to do anything for it.

It will name the HTML root.

So that will end up right in there.

And in the view transition group, all the transforms, rotations, and sizing happens.

So kind of the flip stuff.

And then inside of there is a view transition image pair, and you can see that it’s set to isolation isolate because of the only reason that this element is here is because the old and the new stage, you can actually select them and see them.

By default, they have mixed blend modes going on.

So you don’t want to mix that with any elements that would be underneath it.

So you would use isolation isolate.

But this is pretty cool.

You can actually see what’s happening.

And you can also actually see you can’t inspect anything about the text inside.

It’s just an image of what was.

Okay.

So let’s get back to the presentation.

And I’ve lost my note.

Okay.

So by default, the view transitions only make a snapshot of the root element.

But you can add stuff like the image, for example, right here.

If I would name that, then the browser knows.

And I’ve named it on the second page as well.

Then the browser knows those two elements are connected, and I’m going to figure out the transform in sizing and stuff like that.

So we can do that with view transition name and then the name that you want to give it.

It can be anything.

But it’s important to keep a couple of things in mind.

So everything is an image.

I’ve said that before.

But it’s really important to get that in your mind.

Because a couple of times, I thought, oh, I can do that with view transitions.

And then thought, no, that’s not possible, because it’s an image.

So it doesn’t matter what kind of element you choose to give the name.

Like an SVG or a text or a diff with stuff inside of it.

It will be used as an image.

So the second thing is that aspect ratios really need attention.

So by default, if you have an aspect ratio change between two states, it will not look good.

And view transition names need to be unique.

So on a single page, there can’t be more than one of the same view transition name.

So between pages, you do want the same name.

But on the same page, you can’t be the same name.

And clip paths and overflows on parents are disregarded.

So you either have to set the clip path on the named element or you have to make the named element the clip path thing.

Because it will just ignore it.

It will just show the image or the thing without the clip path.

And the thing that I’m bummed out by the most, you can’t manipulate the automatic transforms at the moment.

So it does a matrix animation.

It would be lovely if it did, like, translate X and translate Y and you could get those values somehow and just animate the Xs first and the Y axis next and then the size or everything in between.

But it’s not possible to do that, unfortunately.

So what you can use view transitions for.

Another code pen.

These are some great ladies from tech.

Hope you know them all.

There will be a quiz later.

So the JavaScript for this is very ugly.

I had, like, three weeks to prepare, just to be clear.

Two weeks of those, I’ve worked full time.

So don’t look at the JavaScript.

But there’s two ways of, like, initiating a view transition.

You could do it by changing a page and having the add view transition CSS ready.

Or you can do it from JavaScript by using document.startViewTransition.

So I’ve created a function that filters or sorts items.

And around that filtering or sorting, I’m setting the document.startViewTransition.

And if document.startViewTransition does not exist, I’m just filtering the items like normal.

So by default, that’s what it looks like.

Let’s see.

Yeah.

So this is what everyone will see where view transitions are not supported.

So this is what you will see on Firefox.

But if I do something simple, like add the view transition name, I’ve set a view transition CSS variable on every image.

And now I’m adding that.

Then you can see that it does stuff.

This is automatic.

This just happens.

It’s crazy.

Like this used to, like, I don’t know if I was even able to do this with JavaScript.

Like...

Crazy.

So...

And then this is kind of like a filter.

So this is like a kind of useless filter.

But you can filter by media type.

So black and white.

And then full color.

And then painting.

Because Ada Lovelace doesn’t have a photo.

She was the OG programmer.

But we can enhance this kind of easily.

Because now what happens when I go back is the other items just fade in.

Because that’s default.

If items don’t exist, they will just fade in.

But what we can do, we can check if the old view transition is an only child.

Because when you delete something from the DOM or set display none to it, you don’t even have to delete it from the DOM, it won’t have a new view transition state.

But it will have an old view transition state.

And with CSS, you can check if something is an only child.

Which is kind of sad, but...

So we can set an animation to it.

So I’m setting the scale out animation to it, which will scale them out to zero.

So now it looks like this.

And that’s just, like, three more lines of CSS.

That’s all.

And then, of course, the new items, they still fade in.

So that’s kind of annoying.

So we want to fix that, too.

So when an item is coming back from display none or from removal from the DOM tree, it will also only have a view transition new.

So we can check if there’s only a view transition new.

And then we can do an animation for that.

So like this.

Like this.

And back like this.

It’s nice.

I love it.

Thank you.

But the great thing about using the only child thing is that the sorting still works like before.

Because then it will have an old and a new state.

Because it has an old state where it came from and a new state where it’s going to.

Perfect.

Okay.

So we have some more fun stuff.

Are you ready?

Cool.

Okay.

So I did a conference website, as you do.

There’s a couple of scroll driven animations in there.

I won’t have time to go into that.

But I did create a locations page as well, which I thought was kind of fun.

So then you scroll and there’s the slide events and then more scrolling and then something from an email that Marc wrote.

So fun stuff.

But let’s talk about view transitions some more.

So we have this kind of boring grid with awesome people.

So let’s make it more awesome.

So that’s probably not supposed to happen.

Let’s go back.

It’s already animating.

I’m looking at my terminal right now.

You’re not seeing it.

Can I get it?

Okay.

No, I’m just going to type here.

You just have to believe me that I’m doing stuff.

Good check out.

Okay.

Is it ugly again?

Yes.

Okay.

No.

Not ugly.

Brandon is amazing.

I’m sorry.

I’m sorry.

But the animation is gone.

So...

Okay.

Let’s get the code here.

I hope it opens in the right tab.

I just opened my calendar.

This is chaos.

Okay.

I need to be able...

Ah!

I found it.

Like mirroring, guys.

It’s much easier.

Maybe I can just mirror.

No, that’s dangerous.

Let’s not do that.

Okay.

Just need to find my...

It used to be the left side.

Someone fixed it.

Okay.

Nope.

That’s the presentation things.

Is it this one?

I really hope so.

Please, code.

Please come back.

Please.

Oh, okay.

That’s the other way around.

Code!

Yay!

Clapping for the basic stuff.

I love you guys.

Okay.

So...

I’ve just...

I’ve commented out the rest.

But it just has the basic thing.

So it’s the at view transition navigation auto.

What happens when you click an item, it just crossfades to the next page.

Which is kind of cool.

But it’s not as cool as it could be.

Because we have these lovely speaker photos, and we could animate it to the new state.

So let’s do some basic stuff.

Matthias said that I probably use ESIS.

And I do.

I definitely do.

This is a cubic this year.

I was trying to say it really fast, because I don’t know how to pronounce it.

And I’ve just saved it in a CSS variable, so I can use it later.

I’m using the same technique as I used earlier.

So I just set the view transition name to the view transition CSS variable.

You can name this whatever you want.

I just like to do it like this.

Because otherwise your code starts to look like Tailwind.

And we don’t want that.

So by just setting the view transition name, we can see that stuff happens.

So we’re going to the new state.

And it looks kind of fine.

It looks kind of like...

Oh, you’re done.

Perfect.

But what happens when we slow things down is that it starts to look kind of weird.

Let’s slow it down even more.

So it kind of morphs around.

And I was talking about aspect ratio before, remember?

So that’s something that we have to fix.

That we have to pay attention to.

So let’s do some more default stuff first.

Because that’s multitask.

So I’m setting the default...

The root new and old state animation duration to 0.1 seconds to just make it very fast.

Because that’s just the rest of the site fading out.

I’ve set a view transition name on every speaker image, by the way.

I don’t know if I mentioned that.

And something else that’s quite new.

New enough that my editor doesn’t understand it.

Is the view transition class that we can add.

And that really is a very good thing.

Because before, you would have to create the next lines that I’m showing for each individual speaker.

But now we can just say that the speaker card image, which is the image right inside of here, gets a view transition class of speaker image.

I’m using a bit of JavaScript to set the view transition class of the clicked item to active speaker.

So it will be the same as the target one.

Which also will be...

This one also has a view transition class of speaker image.

Okay.

So what we’re doing...

We’re setting some more defaults.

Because why not?

Let’s make it perfect.

So the animation duration for both the speaker image and the active speaker will be 0.6 seconds.

The animation fill mode will be set to both.

I also did that for the root thing.

Because then if another animation is longer than this, it won’t default back to the first state.

It’s kind of like animation...

You can also use forwards.

I just used both.

Because my code editor suggested that.

We’re all slaves to AI now.

So the animation timing function, finally using that ease there.

Comes to great use.

I’m setting the active speaker to a set index of 1.

Because we have stacking context in view transitions, shadow elements as well.

So that’s great.

Okay.

Let’s fix the aspect ratio.

So by default, the old and new states have a fade out animation with a mixed blend mode.

And we don’t need that.

So it sounds kind of counterintuitive.

But we’re going to remove the animation.

We’re going to set the height to 100% of the image.

And we’re going to set the overflow to clip and the object fit to cover.

Because the size will change throughout the animation.

So if we use object fit cover, it will fix it.

But we also don’t really need the new state where we’re coming from the overview.

Because when you’re dealing with aspect ratios, you kind of want to keep the image that’s the biggest.

Where most of the image is visible.

So in this case, that will be the square image.

Because when you go to this version, the sides are cut off.

So let’s do that.

We can just set it to display none.

It will be removed from the view transition.

Shadow element.

Kind of great.

So now we fixed this one.

Okay.

Let’s do it a little bit quicker.

Okay.

Nice.

Fixed.

Okay.

So let’s get distracted by other things again.

This is kind of how I work.

So I was kind of annoyed that the other speaker images were doing nothing and just fading out a little bit.

So let’s scale them down while we’re busy.

Okay.

So you can see that when I go back, it looks kind of weird.

So we kind of need to know if we’re coming from the overview page to the speaker page or from the speaker page to the overview page.

So we can do that with JavaScript again.

I’m sorry.

It’s not all fun and games.

So we have a new event page reveal, which is fired right before view transitions are started.

And you can it’s a lot of code.

It’s not really interesting.

You can read it back later.

I’ll share the code with you.

But what we can basically do is take the from URL and the next URL and then use a function to check if it’s the overview page or the speaker page.

And then based on that, we return that.

And we can add it as a view transition type.

It’s kind of weird.

But we can use that in CSS.

So we can do organized chaos.

We can do we can check for active view transition type.

And we can check if that’s either overview to speaker or speaker to overview.

Because those are the two ones I just created.

You can name these kind of things everything you want.

And we’re just going to move everything that I just did inside of there.

I do my own sound effects, too.

Just like Toby.

And then we need to make sure that those are ampersands, because I kept forgetting that during my rehearsals.

We remembered.

And we’re going to do this for both the old and the new.

Thank you, Cursor.

I love you.

But this part we’re going to do based on the actual type.

So let’s grab this one.

So we have the overview to speaker.

And that’s the one that we had before.

So that’s where we want this in.

We want to hide the old image.

What’s happening?

What’s happening?

Cursor is great.

And for the speaker to overview, we want to hide it.

Cursor is not great.

Don’t trust AI, guys.

I changed my mind.

We want to hide the new one.

But why?

You’re just letting me do all this stuff, and I’m doing the wrong thing.

It’s this one, guys.

I need this one.

So the… … thank you, Cursor.

Okay.

So are you still with me?

We’re almost done.

Don’t worry.

Okay.

So I’m either hiding the old one or the new one based on which page we’re coming from.

That’s basically it.

So now when we go to Gustavo Ferrari, great name, by the way.

And then we go back.

It’s perfect.

Right?

Well, almost.

Because now the animation has stopped working, this one.

I don’t know why.

Let’s not dwell on that.

Imagine great scale outs and scaling animations.

Another thing I did, because I was pressed for time, so I was looking for distractions.

I’ve added, like, a way to go to the previous and next speaker.

So when you click, it will go to the next page.

And you’re actually on Gustavo’s page now.

And when we go here, we’re actually on Martina’s page.

Oh, don’t look at this on mobile.

Promise.

Or you won’t get the code.

So this also looks great, like, out of the box, like, if you don’t pay much attention to it.

But when you slow it down, it’s a little bit weird again, because of the fade outs and fade ins.

So we’re going to do a bit of the same logic as we did before.

So first of all, we’re setting the pre...

Oh, I’m just commenting all of this at once.

No?

Okay.

Do it by hand.

So I’m setting a view transition class on the previous speaker, I’m setting a view transition class on the next speaker.

Because those names are going to be different every time, so it’s nice to use a class again.

I’m setting the view transition class of the speaker image to a different name, just while the view transition type is speaker to speaker.

So I also have...

Yes, I need to do this as well.

I also have a check to check if it’s a speaker to a speaker.

Let’s not forget to save.

And then...

The animation is set to slow.

We’re doing some stuff...

We can use an asterisk in groups to select all groups.

So just setting the default duration now to 0.7 seconds.

Setting the animation timing function to the ease that I defined earlier.

I don’t think I actually need this.

Let’s forget about that.

Set index 1 on the speaker image again.

And then we’re going to do the same logic with the only child thing.

So we’re going to check if the previous or the next speaker is an only child, which means that it will be deleted from the DOM tree.

Very sad, but it’s fine.

And based on that, we’re going to define a CSS variable to use in a function.

And that’s...

Did I save it?

No.

Let’s set it back to 100% again.

That’s how you get this lovely thing!

No!

Oh, this means always handy.

That was it.

Thank you!

(Applause)