Scroll-Driven Animations Basics

All of this is 100% CSS, no JavaScript 😮 (With the exception of the video scrubber). And it's polyfilled until support drops in Safari.

Image Reveals

Amet ad illum dolor accusamus voluptate, iusto. Explicabo itaque similique praesentium reiciendis dolorum quis doloribus? Enim eligendi illum rerum aut aperiam? Doloribus culpa nisi velit officia facere perferendis Necessitatibus voluptates.

Amet nostrum atque natus doloribus minima! Iusto eum nisi eveniet quaerat aspernatur? Nulla repudiandae magnam modi modi explicabo explicabo atque Repellat quae porro accusantium doloremque possimus Assumenda expedita recusandae quidem.

Adipisicing explicabo laborum sint nesciunt illum? Delectus lorem at nobis libero cumque? Blanditiis mollitia ratione vitae cumque laborum Voluptatem cupiditate molestiae natus impedit id sunt Assumenda distinctio repellendus sed officia.

Adipisicing earum natus harum soluta sit quos aperiam Ad cum ratione numquam aliquid facilis repellendus animi voluptates! Exercitationem vero autem molestiae dolorem exercitationem. Harum architecto eaque quis rem veniam Nemo.

Dolor quo vero facilis porro soluta quasi Fugiat ad eos aut exercitationem quam Animi maxime aut facilis hic eligendi fugit. Esse obcaecati sequi ea officiis doloribus. Odit tempora qui deleniti.

Dolor quo vero facilis porro soluta quasi Fugiat ad eos aut exercitationem quam Animi maxime aut facilis hic eligendi fugit. Esse obcaecati sequi ea officiis doloribus. Odit tempora qui deleniti.

Dolor quo vero facilis porro soluta quasi Fugiat ad eos aut exercitationem quam Animi maxime aut facilis hic eligendi fugit. Esse obcaecati sequi ea officiis doloribus. Odit tempora qui deleniti.

Concentric rings of blue and purple paint swirls

Dolor quo vero facilis porro soluta quasi Fugiat ad eos aut exercitationem quam Animi maxime aut facilis hic eligendi fugit. Esse obcaecati sequi ea officiis doloribus. Odit tempora qui deleniti.

Light blue paint partially mixed into dark blue water

Cross-scrolling Text

The two lines of display text will scroll in opposite directions as the user scrolls the page.

Filler text for spacing. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit.

Section Pin (Faux Scroll-Jacking)

This will emulate scroll-jacking by creating a sticky track and translating an element horizontally.

Yellow light through clear liquid with bubbles

Dolor quo vero facilis porro soluta quasi Fugiat ad eos aut exercitationem quam Animi maxime aut facilis hic eligendi fugit. Esse obcaecati sequi ea officiis doloribus. Odit tempora qui deleniti.

3D Phone Spin

Slightly spin 3D CSS elements.

A gorilla astronaut made of woven material crosses their arms

A person with an astronaut helmet standing in a field of grass with flowers in their hand

Dolor quo vero facilis porro soluta quasi Fugiat ad eos aut exercitationem quam Animi maxime aut facilis hic eligendi fugit. Esse obcaecati sequi ea officiis doloribus. Odit tempora qui deleniti.

Video Scroll Scrub

Use the animation progress values from the browser to progress an HTML video element. (Currently doesn't work on everything)

Dolor quo vero facilis porro soluta quasi Fugiat ad eos aut exercitationem quam Animi maxime aut facilis hic eligendi fugit. Esse obcaecati sequi ea officiis doloribus. Odit tempora qui deleniti.