{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreib2exr3t7ntwezfwcimfergoiehv3kfbplsjub5w24et56skan4lm",
    "uri": "at://did:plc:2mg4c2y4wiwzddlc5tjat7oc/app.bsky.feed.post/3mgh63ohsgp62"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreigan2v5amkfdimxsndqrwsfup26ekaovuxdhzgr63m4qtyndhxs2u"
    },
    "mimeType": "image/jpeg",
    "size": 153526
  },
  "path": "/swoop-there-it-is?utm_source=rss",
  "publishedAt": "2026-03-07T05:32:21.000Z",
  "site": "https://nerdy.dev",
  "tags": [
    "blog",
    "css",
    "CodePen",
    "`view-transition-name`",
    "by Adam Argyle ([@argyleink",
    "@argyleink) on [CodePen",
    "@keyframes"
  ],
  "textContent": "Like Zoolander who can't turn right, I thought View Transitions couldn't swoop.\n\nI had been under the impression that they couldn't curve towards the destination, and it was one of those things that you like **can't unsee**. All view transitions going in straight lines…\n\nCodePen\n\nAll my prior attempts had failed, til now.\n\n##  The way of the swoop #\n\nWhen you give something a `view-transition-name` like:\n\n\n    #ball1 {\n      view-transition-name: view-transition-ball;\n    }\n\n`\n\nThe browser creates keyframes with a predictable naming pattern:\n\n\n    @keyframes -ua-view-transition-group-anim-view-transition-ball {\n      …\n    }\n\n`\n\nIf you pause a view transition, you can see the keyframes and the keyframe name applied to the pseudo elements:\n\n_Anticipating that_ naming consistency, add a comma to the `::view-transition-group()` element and include some keyframes of our own:\n\n\n    ::view-transition-group(view-transition-ball) {\n      animation:\n        -ua-view-transition-group-anim-view-transition-ball 2s ease-in-out,\n    /* 👉*/ swoop 2s ease-in-out;\n    }\n\n`\n\nThe special sauce, the THING THAT TOOK FOREVER TO FIND, is that you can **only use individual transforms, NO`transform` shorthand**:\n\n\n    @keyframes swoop {\n      50% {\n    /* ❌ */ transform: translateY(50px);\n    /* ✅ */ translate: 0 50px;\n      }\n    }\n\n`\n\nIf you try to change the transform, things fail. And if you try to add `animation-composition`, things fail harder (don't know why).\n\nBUT, using individual transforms, and just like that, you can blend a scale, translate, or whatever in combination with the browser native transition.\n\n**The trick also shows you how you can add a blur to a view transition.**\n\nCodePen\n\n\"The key to the unlock was individual transforms.\"\n\nBelow is a demo you can try that makes a simple wiggling view transition.\n\nThe green ball uses custom keyframes and animation composition, and the pink ball uses view transitions. They dont perfectly match either, which is interesting (exaggerated with a scale added). There's a perspective difference at play I don't fully understand.\n\nSee the Pen  by Adam Argyle (@argyleink) on [CodePen.  You can stop reading here if you want, but I'm about to rant about how this was lame as crap to discover. The limits # While I'm glad there's a little bit of a way for it to work, there's plenty to still want.\n\n  * No access to the dynamic values that the browser calculates for view transitions\n  * The solution is clunky and requires static `view-transition-names` (no `match-element` support), it breaks if the browsers name their keyframes something else or if I'm assigning names with JS\n  * No support for `animation-composition: add`\n  * No way to control the easing of the x vs the y axis separately, or separate durations\n\nI really just wanted to change the `X` easing to be `ease-out` and the `Y` easing to be `ease-in`. That would give a nice swoop. Or even add a slight delay the `X` and not the `Y`, another way to create a swoop. None of these more normal and better ergonomic ways are available. Just this narrow case with individual transforms and trying to piggy back on a browser keyframe naming convention.  But hey, now we can add swoops to a native view transition and we learned a trick that can make motion blur view transitions. That's coo.",
  "title": "View Transitions can swoop‽"
}