I woke up a little hungover on Saturday with burgers on the mind. I was inspired after my locally famous breakfast burrito site to do it again, but pick something perhaps even more niche.
Smashburgers it is. (Here’s a repo.)
I used Astro for this partially because they just went v3, and I wanted to try it, specifically, the view transitions stuff, and partially because I just like Astro and find it to be a great fit for stuff like this. View transitions are super new, and the most useful varietal of them is the “for navigations” sort, where they work across page loads. I have a feeling it’s going to be a hot while before we see them across browsers, so the fact that Astro is sorta-kinda polyfilling it using the slighty-more-supported-by-Chrome startViewTransition is clever.
I wish the animations were a little more buttery smooth. I think the problem is that I’ve applied the transitions to the images themselves, so the “paint” that the browser is saving and transitioning is the image alone, which doesn’t really know about or respect the fact that it’s within an element with overflow: hidden on it. It’s interesting how it makes all the images forget that during the animation. You can see it in Chrome DevTools animation panel slowed down:
UPDATE: I kept messing with it and now it’s smoother in Chrome. It was definitely related to the overflow so I got rid of that. Not sure how to feel about that really. Like I both get it and that’s annoying?
The behaviors in Firefox and Safari are also a little janky. Like it’s mostly a fade-in-out effect, but I sometimes see elements not get re-painted at all, or have the transitions fire strangely. Like all web animations, I suspect while the basics are easy to grasp, actually getting great animations in place will be nuanced, tricky, and done best by people with the time, expertise, and motivation to get it right.
Some of the burger images (that I swiped off Instagram) were a little too tightly cropped for what I wanted. I found it useful if all the burgers were approximately the same size and placement within a larger canvas. So I grabbed the Photoshop Beta with the generative fill stuff and expanded the backgrounds when needed.
You can see in that video above it freaked out a little on the red object on the right. But like a lot of these generative image AI tools, it gives you variations right off the bat. This one where it decides it’s a car is neat:
Sure, AI is 85% hype and is likely to fundamentally change the world about as much as the blockchain did. But you gotta admit sometimes it’s pretty cool at doing jobs that would have been so difficult and time consuming before we probably just wouldn’t do them at all.
Leave a Reply