blog

Some fantastic behind-the-scenes stuff about Stripe’s design work by Benjamin De Cock. Absolutely everything is clever and using very modern techniques.

• Using CSS grid for their iconic background stripes
• Using 3D cubes for aesthetic flair
• Using reduced motion media queries to accommodate that preference
• Using the Web Animation API for event-triggered keyframe-like animations in JavaScript

Plus one I’d never seen before:

Connect’s landing page uses the new Intersection Observer API which provides a much more robust and performant way to detect the visibility of an element … The observeScroll helper simplifies our detection behavior (i.e. when an element is fully visible, the callback is triggered once) without executing anything on the main thread.

Direct Link to Article — Permalink

Connect: behind the front-end experience is a post from CSS-Tricks