Posts

This profile is from a federated server and may be incomplete. Browse more on the original instance.

bramus, to random
@bramus@front-end.social avatar

⭐️ Scroll-Driven Animations with CSS (2024.05.30 @ WebExpo)

Slides of the talk “Scroll-Driven Animations with CSS” I gave at @webexpo today.

https://www.bram.us/2024/05/30/scroll-driven-animations-with-css-webexpo/

bramus,
@bramus@front-end.social avatar

UPDATE: The recording got published on the SlidesLive platform for you to (re)watch.

https://slideslive.com/39021011/scrolldriven-animations-with-css?locale=en

bramus, to random
@bramus@front-end.social avatar

Congrats to @webexpo on organizing their annual conference!

Things went very smooth and the talks I attended all smashed it.

It's been an honor to speak at this WONDERFUL venue and to have been part of the AMAZING line-up they had.

View from the stage
Behind the scenes

bramus, to random
@bramus@front-end.social avatar

🥹

Very exciting news! This is the thing that gives Custom Properties their SUPERPOWERS.

Yes, you can use them to enforce type safety, limit their inheritance, and set up a default but what I like most about them is that YOU CAN ANIMATE/TRANSITION REGISTERED CUSTOM PROPERTIES.

https://botsin.space/@intenttoship/112519846001484140

scrwd,
@scrwd@mastodon.social avatar

@bramus so this issue is affecting Chrome and Safari implementations - is it likely to affect the Firefox one too, or is there a chance they have solved the problem or that it was never a problem for their compositor?

bramus,
@bramus@front-end.social avatar

@scrwd Also affects Firefox.

bramus, to random
@bramus@front-end.social avatar

After a wonderful last week followed by a quick pit stop at home, I'm hopping onto the next plane to fly to Prague.

I'm scheduled to give a talk at on Thursday, covering Scroll-Driven Animations.

bramus, to random
@bramus@front-end.social avatar
bramus, to random
@bramus@front-end.social avatar

I came prepared … 🩳🩴

But turns out the pool wasn't expecting me 😅

mdavis,
@mdavis@mastodon.social avatar

@bramus Filled pool is not yet GA. It’s hidden behind a feature flag. Then you can do your swim-driven animations.

bramus,
@bramus@front-end.social avatar

@mdavis Hah, brilliant! 😂😂

bramus, (edited ) to random
@bramus@front-end.social avatar

📣 PSA: Time to update your MPA View Transitions demos!

The opt-in for Cross-Document View Transitions for MPA is done by means of the @​view-transition at-rule in CSS.

The meta tag from before was a temporary thing while the feature was still being developed behind a flag. The meta tag no longer does anything, you need the CSS opt-in.

bramus,
@bramus@front-end.social avatar

Cross-Document View Transitions are shipping in Chrome 126.

There’s also two new things that you can use with View Transitions:

  1. Transition Types
  2. view-transition-class

See https://developer.chrome.com/blog/view-transitions-update-io24?hl=en for an overview of all additions and improvements.

meduz,
@meduz@m.nintendojo.fr avatar

@bramus Waow, I had no clue the currently available ViewTransition API was limited to SPA. I’m glad I didn't tried it earlier, I would have been very disappointed. 🤣 Weird this info never reached my brain.

Question: if {current doc} has the <meta> but {next doc} does not, does it mean the browser needs first to fetch the CSS on top of the HTML and then will be like “well, no transition”, which would lead to a slower navigation? With <meta>, the discovery is way faster, no? 🤔

bramus, to CSS
@bramus@front-end.social avatar

Hey my friends (and beyond)! I have published the slides of my talk “MPA View Transitions are here!” on my blog for you to check out.

Once the video gets published, I'll be sure to update the post to include it.

https://www.bram.us/2024/05/23/mpa-view-transitions-are-here-2024-05-23-jsheroes/

Me, on stage
Me on stage, from afar

bramus, to random
@bramus@front-end.social avatar

Did a rehearsal run of my deck for tomorrow's and now I'm suddenly busy overhauling the entire thing ... 😬

bramus,
@bramus@front-end.social avatar

@pepelsbey color-scheme: dark; 🫡

(It's a keynote deck. Thankfully I used a theme so it was mostly updating the theme modulo a few special cases)

bramus,
@bramus@front-end.social avatar

@ryantownsend Oh my! Nightmare-material 😱

bramus, to random
@bramus@front-end.social avatar

Come hear @mia and me talk about some CSS/web things.

I'll be covering Cross-Document View Transitions for Multi-Page Applications (aka: "just websites") or maybe Scroll-Driven View Transitions which combines two of my favorite topics … still undecided.
https://social.vasilis.nl/@vasilis/112444587000998568

bramus, to random
@bramus@front-end.social avatar

Excited to be on my way to Cluj-Napoca (Romania) to speak at .

Tomorrow I'll be giving a talk on Cross-Document View Transitions for MPA.

bramus, to random
@bramus@front-end.social avatar
bramus, to random
@bramus@front-end.social avatar

What's new in view transitions? (Google I/O 2024 update)

In this video I introduce you to cross-document view transitions for MPA along with two improvements that allow you to more easily work with view transitions in general.

https://developer.chrome.com/blog/view-transitions-update-io24

bramus,
@bramus@front-end.social avatar

In this video+post I cover:

  1. Cross-Document View Transitions for MPA
  2. Share animation styles with view-transition-class
  3. Selective view transitions with active types

MPA View Transitions ships in the upcoming Chrome 126; the other features already shipped in Chrome 125.

bramus, to random
@bramus@front-end.social avatar

Just announced at : cross-document view transitions for multi-page applications are available in the upcoming Chrome 126 🎉

Expect a video (and blog post) with details to drop this Thursday.

In the meantime, check out the updated docs: https://developer.chrome.com/docs/web-platform/view-transitions

Recording of Jon Dahlke doing announcing MPA View Transitions at Google I/O.

benschwarz,
@benschwarz@front-end.social avatar
bramus,
@bramus@front-end.social avatar

@benschwarz Oopps! Thanks for mentioning. Will take a look

bramus, to random
@bramus@front-end.social avatar

Ready for two days of

  • All
  • Subscribed
  • Moderated
  • Favorites
  • megavids
  • InstantRegret
  • magazineikmin
  • thenastyranch
  • modclub
  • everett
  • rosin
  • Youngstown
  • slotface
  • ethstaker
  • mdbf
  • kavyap
  • osvaldo12
  • DreamBathrooms
  • anitta
  • Durango
  • ngwrru68w68
  • tester
  • khanakhh
  • love
  • tacticalgear
  • cubers
  • GTA5RPClips
  • Leos
  • normalnudes
  • provamag3
  • cisconetworking
  • JUstTest
  • All magazines