As I was exploring Adam’s AIM technique recently, I thought a great application would be a photo gallery. The AIM (Anchor-Interpolated Morph) technique can animate elements entering and exiting from other elements, utilizing those elements as CSS anchors.
In a photo gallery, the “thumbnails” can act as anchors, with larger versions of photos animating in from these thumbnail anchors and back out again.
This type of animation not only looks impressive, but serves a functional purpose by reminding you where an element originates and where it disappears to. For instance, if you are reviewing images from a photo shoot, this animation serves as a helpful reminder as you navigate through them.
Here’s the demo:
Here’s a video if your browser doesn’t support this technology mix.
HTML and CSS Setup (No JavaScript by Default)
A cool benefit is creating a photo-grid like this with the ability to “open larger” without using any JavaScript. It’s as straightforward as this:
That’s a
This setup achieves the desired functionality.
The Three States
AIM (or any similar entry and exit animation technique) involves three states.
State 1: Before Open / On Way In
Specific entry styles need to be defined for the element (the “popover” in this scenario) before it enters the page. Though @keyframes can be used, utilizing @starting-style offers better control and interruptibility.
[popover] {
…
@starting-style {
}
}
Further considerations are needed. Open styles should be crafted first to ensure proper specificity, as starting styles need at least equal specificity to be effective.
State 2: Open
Open state styles can be explicitly set using :popover-open. While JavaScript adjustments are an option, using popovers for their intended purpose is more efficient.
[popover] {
…
&:popover-open {
}
@starting-style {
&:popover-open {
}
}
}
Note that starting styles are placed after open styles. While this might seem counterintuitive, @starting-style lacks inherent specificity, so placing it later in the order ensures it takes precedence.
State 3: After Closed / On Way Out
These styles are applied directly to the element without additional selectors, although explicitly placing them in a selector might offer clarity.
[popover] {
…
&:popover-open {
}
@starting-style {
&:popover-open {
}
}
&:not(:popover-open) {
}
}
Make sure it actually animates
A notable caveat: a popover’s display value shifts between none and block upon opening and closing, potentially disrupting entry and exit styles.
A CSS trick ensures animations persist despite the display change. Normally an immediate change, specifying transition-behavior: allow-discrete synchronizes it with the animations.
Implement this along with transition settings.
[popover] {
@media (prefers-reduced-motion: no-preference) {
transition:
display 1s allow-discrete,
translate 1s;
}
&:popover-open {
translate: 0 0;
}
@starting-style {
&:popover-open {
translate: -100px 0;
}
}
&:not(:popover-open) {
translate: 100px 0;
}
}
Key points:
1. Transitions are managed with a @media (prefers-reduced-motion: no-preference) query to remove—or scale down—transitions where necessary.
2. Exit styles differ from entry styles, adding a fun element.
The AIM Part
These styles prepare for entry and exit transitions on popovers. Currently, popovers slide in from the left and out to the right. With AIM, these animations originate from another element’s specific coordinates—the “anchor.”
For AIM, entry styles derive from the