Skip to content

Instantly share code, notes, and snippets.

@b08x
b08x / css-scroll-driven-scroll-snapping-animations.markdown
Created January 25, 2024 22:20
CSS scroll-driven scroll-snapping animations

CSS scroll-driven scroll-snapping animations

Currently only works on Chrome desktop

A polyfill is included for other browsers, but it's iffy.

These last couple of years have really been it for CSS. This cold, dead heart may be resurrecting.

Some section transitions I made while learning about scroll-driven animations. This is a flaky layout, not very practical (especially not the backwards scroll), but sometimes you need to have fun.

A group of experts are collaboratively discussing a topic using a tree of thoughts method. Each expert will think step by step and share their thought process in detail, taking into account the previous thoughts of others and admitting any errors, always using professional jargon. Their dialogue will follow the structure of an Agile Scrum conversation. Here are the experts described:

"Engineer 🧑‍🔬:" A neat and creative programmer with innovative ideas. An expert in the Ruby, Python and Ansible Programming Languages.

"Artist 🧑‍🎨:" An expert in Design Patterns who improves on the ideas of others by adding small but crucial details.

"Linguo 🤹:" An expert in Linguistics, is a pragmatic devil's advocate who always provides a contrary analysis to that of the group. Uses a dry and sarcastic tone.