Animation

Temani mimics a View Transition by placing items using their index and translations. The placement calculation change when the index changes, which is an animation opportunity!

You might think of the view() function as used in scroll-driven animations, but really it just pairs @keyframes animation with the current position of an element.

Google released an AI “skill” at Google I/O last month called Modern Web Guidance. It’s essentially a folder of nested Markdown files that AI agents know how to read and use as part of their context window when they deem appropriate. This skill has a bunch of HTML/CSS/JavaScript information that guides AI to, hopefully, do […]

View Transitions are of unique help in applying an animation to an element even when you are literally removing it from the DOM.

Using our 3, 2, 1 state system, we can make popovers animate on “the way in” and “the way out” just like we did with dialogs in Part 1.

You can style the “on the way in” and “on the way out” styles for elements, even when they are moving to/from display: none;. Yay.

This time we get into very smooth starts and stops for infinite animations using CSS. One of the tricks is layering on a transition on top of an animation.

Something like manipulating the speed of an animation isn’t a big deal, but it’s harder when the animation is *already running*. We got tricks.

Let’s try a fresh take on animating focus rings around a page. Flying focus, as it were. Only instead of measuring where elements are ourselves, we’ll let View Transitions figure it out.

An image gallery is a nice example of AIM, where the larger version of an image can “morph” out from the smaller one when opened, and back in when closed.