Tweet

This Thread may be Removed Anytime!

Twitter may remove this content at anytime! Save it as PDF for later use!

More from @bramus

Bramus

@bramus

Oct 4

@CodePen

What if I told you this demo right here is powered by nothing but HTML and CSS?

Yep that’s right, not a single line of JavaScript (*) in sight! 🤩

Demo on @CodePen: codepen.io/bramus/full/GR…

(*) Except for a polyfill that’s being loaded

https://twitter.com/bramus/status/1577060635556339714

The demo uses Scroll-Snapping, CSS Reflections (using the proprietary `-webkit-box-reflect`), and Scroll-Linked Animations.

With Scroll-Linked Animations, it’s possible to drive a CSS Animation by scroll: as you scroll, an animation moves forwards/backwards along with it.

In this demo, we track each album cover as they enter and exit the scrollport (enter from the left, exit on the right).

To do this we use a `view-timeline` which can be compared to how IntersectionObserver tracks elements.

```css
li {
view-timeline: li-timeline inline;
}
```

Read 9 tweets

Bramus

@bramus

Sep 26

🎉🥳 Good news everyone! The Large, Small and Dynamic viewport units (lv*, sv*, dv*) are coming to Chrome 108!

I2S announcement: groups.google.com/a/chromium.org…

Now you might be wondering: “What took Chrome so long?!”

Well, if you’ve watched my #HTTP203 episode on Viewports () you know that there currently is a difference between browsers on how they handle the Virtual Keyboard.

Today, some browsers resize the Layout Viewport (and therefore ICB as well), while some don’t.

This difference in ICB resize behavior affects the Viewport Units.

Read 8 tweets

Bramus

@bramus

Dec 30, 2021

At the start of 2021, I discovered CSS @scroll-timeline, a way to link CSS Animations to the scroll offset of a scroll container.

Seems fitting to close off the year with a final demo: reverse-scrolling columns.

🔗 codepen.io/bramus/pen/jOG…

🧵

In browsers that support CSS Scroll-Timeline (which is only Chromium with “Experimental Web Platform Features” enabled for now) the effect is achieved using nothing but CSS.

In browsers that don't support CSS Scroll-Timeline a JavaScript polyfill is loaded and used. The animations themselves are regular WAAPI animations, extended with a linked ScrollTimeline instance.

Read 6 tweets

Bramus

@bramus

Dec 27, 2021

🔥 CSS Features to start learning, as I expect them to ship in all browsers in 2022:

1. Container Queries
2. Cascade Layers
3. Color Functions
4. Viewport Units
5. :has()
6. Overscroll Behaviour
7. Subgrid
8. Accent Color
9. Media Query Ranges

1. Container Queries allow authors to style elements according to the size or appearance of a container. For size-based container queries, this is similar to a @media query, except that it will evaluate against the size of a parent container instead of the viewport.

2. With Cascade Layers, you can control cascade ordering for same-origin rules properly. You do this by layering your styles using the @layer at-rule. Layers appear before specificity and order of appearance in the cascade.

Read 12 tweets

Bramus

@bramus

Jun 8, 2021

@ChromiumDev

🔥🔥🔥

`document.documentTransition` is a new experimental API in @ChromiumDev that allows you to create transitions between two different visual frames.

🔗 chromestatus.com/feature/519300…

Let's dig in … 🧵

@ChromiumDev

@ChromiumDev In this example you see the API transition between the frame with the avatar and the frame with the info modal. The transition — including "slide up" animation — is handled by the API/browser.

🔗 codepen.io/bramus/pen/rNj…

This is called a Root Transition.

@ChromiumDev

@ChromiumDev To make it work, you need to perform 3 steps:

1. Capture the begin frame
2. Make UI changes (which are not rendered on screen)
3. Transition to the new (target) frame

Read 11 tweets

Share this page!

Bramus

People who liked this thread also liked...

Try unrolling a thread yourself!

More from @bramus

Bramus

Bramus

Bramus

Bramus

Bramus

Did Thread Reader help you today?

Don't want to be a Premium member but still want to support us?

Send Email!