Gray NortonJun 2, 2023
Adam Stoddard
messing around with view transitions; amazing how simple it was to make this “analog tv changing channels” transition happen
May 25, 2023 at 4:13pmWeb
Show threadp1xelHer0May 25, 2023
@aaadaaam wait that is hot!
Show threadChris Silverman 🌻May 25, 2023
@aaadaaam that's amazing. I'm very excited about digging into these.
Show threadAdam StoddardMay 25, 2023
@csilverman thanks! I can't wait for the API to land in stable browsers. So many interesting and fun possibilities.
Show threadJulianoëJun 2, 2023
@aaadaaam @csilverman do we know in what timeframe that could happen? Honestly I know a lot of people/companies that used JS frameworks just to achieve this feel.
Show threadBryan SchuetzMay 25, 2023
@aaadaaam Some nice MaxHeadroom vibes that.
Show threadszescstopniMay 25, 2023
@aaadaaam I just get a page with all css ignored. Browser? (Firefox 88) Location? (Poland). Tons of "Unchecked lastError value: Error: Could not establish connection. Receiving end does not exist." messages.
Show threadChris​‌​‬ Hayes‌​​​May 25, 2023
@aaadaaam
too cool.  
Show threadAlberto CalvoMay 25, 2023
@aaadaaam so cool!
Show threadAdam StoddardMay 25, 2023
@pumpkin thanks Alberto!
Show threadJonMay 25, 2023
@aaadaaam what's the basic technique behind this? All CSS - some sort of custom glitch keyframe animation? SVG filter?
Show threadAdam StoddardMay 25, 2023
@scrwd it's a combo of SVG filters and CSS keyframe animations. I embed a SVG with 4 different named filters on every page on my site, and have a keyframe animation where every keyframe references one of those 4 filters. Then you can use it for whatever, like:
::view-transition-old(root) {
animation: noise 0.3s linear forwards;
}
Show threadmotionsuggestsMay 25, 2023
@aaadaaam 😍
Show threadAndy BellJun 2, 2023
@aaadaaam this is bloody fantastic
Show threadAdam StoddardJun 2, 2023
@andy thanks!
Show threadStu RobsonJun 2, 2023
@aaadaaam this is dastardly excellent!
Show threadAdam StoddardJun 2, 2023
@sturobson thank you!