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.