martr.app
Maintainer at @astro.build 🚀
Maker of 👜 Bags of Tricks ✨for view transitions @vtbag.dev
236 posts
392 followers
135 following
Regular Contributor
Active Commenter
comment in response to
post
🔥
comment in response to
post
As always, your slides look awesome!
I bet the content will be just as great!
comment in response to
post
Truly honored – thanks so much for the shoutout, Bramus! 🙏
comment in response to
post
Do not worry — static site generation is Astro's default and works right out of the box. I would even say most Astro sites are statically generated. But if you need server-side rendering, you can set it up for some or all pages.
Just give "npm create astro" a quick try.
comment in response to
post
Scott me up, Beamy!
comment in response to
post
Each image-pair in the .el view transition class gets its own arc keyframes with group specific values.
This makes the start and end points of each group's animation accessible in CSS.
Style based on morph angles and distance. Just imagine the possibilities!
vtbag.dev/tools/utensi...
comment in response to
post
Just kidding, to cheer you up a bit. It might also be a performance nightmare having dozens of iframes floating across your screen.
comment in response to
post
Holy cow! 🤯
Wishing you a smooth and speedy recovery! Hope you feel better soon, once the fever breaks!
I'm sure you've already considered using iframes instead of canvases. Overcomes limitations of html2canvas and the new images would be live too ;-)
comment in response to
post
Works like a charm! Thank you very much, Shinya!
comment in response to
post
And yes, better error messages might also help: You can explicitly catch some of the potential suspects, but the error message is most often "InvalidStateError: Transition was aborted because of invalid state," without any real hint about what exactly went wrong.
comment in response to
post
Yes, that was my initial assumption too. But it is probably not the only factor. Safari seems to interpret that overflow and its consequences differently. For the example linked in the Article updating the DOM only changes window.innerWidth for Blink, not for WebKit.
comment in response to
post
Everything is just perfect. View Transitions, proudly taking its place as one of the three pillars of the core architecture. I would never have dared to put it that grandly myself, but well, it is not exactly wrong. Sometimes you need someone else to say the things you would blush too much to admit.
comment in response to
post
ja, pageswap und pagereveal der View Transition API waren leider noch unbekannt, als wir die Lifecycle events für Astro js definiert haben.
Grinsen musste ich, weil Du im Beispiel den swap einfach wegdefinierst, da Du eh schon alles im before-swap erledigt hast.
Have fun with view transitions!
comment in response to
post
Haha, sehr cool! Du weißt Dir zu helfen!
comment in response to
post
I feel you.
Even if you know exactly what caused it afterward, it really throws you off in the moment.
comment in response to
post
Adam, I am truly sorry. I had to read the post just to believe it. I really admire how you blend hard-earned skill with a motivating sense of fun in everything you do. That is pure @nerdy.dev, no matter where you were or who made the call.
comment in response to
post
Yep, nice touch! I was first afraid that setting opacity to 0 would be to harsh. What browser did you use for the video, @ianbellomy.com? On mine, the dragged element is far more transparent.
comment in response to
post
👍🏼
comment in response to
post
Yes, on my Bag-log already, just no time yet ,-(. Adding to Florian: view transition names must still be unique in full-page animations, so best to use them only to mark participants and handle styling via view transition classes.
comment in response to
post
Also lots of demos, background information and hands-on „Fun with View Transitions“ episodes on vtbag.dev 😁
comment in response to
post
Fine craftsmanship! The blurred SVG mask works so well with the timing and placement.
comment in response to
post
Yep, total masterpiece! 🏆🔥
comment in response to
post
💯
comment in response to
post
github.com/liriliri/eruda ?
comment in response to
post
Not sure iirc, but i believe something like HashMapIterator. 🤣
comment in response to
post
TY! Looks great as it is! Maybe animating the date is a bit too much after all. Sometimes less is more.
comment in response to
post
I’ve got no clue about Hugo! Great to hear you found a clean solution. I do know a bit about view transitions though. Happy to try and find something for the date if you like. Otherwise, this article might help: vtbag.dev/fwvt/healing/
comment in response to
post
I admit, it's a bit hacky, but how about replacing {{ .Content }} with something like
{{ $replacement := printf "<p style=\"view-transition-name: post-first-para-%s\">$1</p>" .File.BaseFileName }}
{{ .Content | replaceRE "(?s)<p>(.*)</p>" $replacement | safeHTML }}
comment in response to
post
Smooth! Now date and first paragraph are the next candidates?
comment in response to
post
Definitely! With Chrome, you likely forget how hard view transitions can be without the Navigation API (looking at you, Safari👀) and I happily admit that it will have many more good use cases.
comment in response to
post
I couldn't agree more: view transitions are the most fun the web’s gotten in a while.
comment in response to
post
Schön auch mal was auf Deutsch zum Thema zu lesen.
comment in response to
post
Many thanks! I guess it's always good to know multiple ways.
That's one of the things that still fascinate me about using the View Transition API: a great mix of learnable craftsmanship and a constant spark for creativity. A big thank you to all who have contributed so far and will in the future!
comment in response to
post
That way, I can simply use CSS transitions on the original element during the #ViewTransitions morph and be done with it.
Only a small change to your original CodePen (1/3): codepen.io/martrapp/pen...