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
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.
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;
}
```
To do this we use a `view-timeline` which can be compared to how IntersectionObserver tracks elements.
```css
li {
view-timeline: li-timeline inline;
}
```
The images themselves are animated using a set of CSS keyframes. We link these keyframes to the ViewTimeline using the `animation-timeline` CSS property.
```css
li img {
animation: rotate-and-show-cover linear forwards;
animation-timeline: li-timeline;
}
```
```css
li img {
animation: rotate-and-show-cover linear forwards;
animation-timeline: li-timeline;
}
```
Scroll-Linked Animations are actively being worked on by our Chrome engineers, and should land later this year / early next year.
It took some time, as the spec underwent a MAJOR rewrite (you might remember prev @scroll-timeline demos from me; that syntax is deprecated)
It took some time, as the spec underwent a MAJOR rewrite (you might remember prev @scroll-timeline demos from me; that syntax is deprecated)
The folks from Firefox are also working on it, but I don’t know when they are aiming to ship.
To plug any holes, our engineers are also working on a polyfill which is catching up with the latest spec changes. You can already use it, but know it’s in flux. github.com/flackr/scroll-…
To plug any holes, our engineers are also working on a polyfill which is catching up with the latest spec changes. You can already use it, but know it’s in flux. github.com/flackr/scroll-…
There’s much more stuff you can do with it (such as tracking various phases, or tracking a scroller’s progress in general) but that’s food for an upcoming blogpost … or maybe even an #HTTP203 episode 😉
All album covers used in the demo are from the wonderful @LociRecords label their catalogue.
If you’re into downtempo / electronic music, be sure to check them out. Recommended starter album: the “Season Two” compilation.
locirecords.bandcamp.com/album/season-t…
If you’re into downtempo / electronic music, be sure to check them out. Recommended starter album: the “Season Two” compilation.
locirecords.bandcamp.com/album/season-t…
* Correction, now that I reread this thread: got my sides mixed up in an earlier tweet 🤦♂️
The covers enter the scrollport from the right, and exit it on the left. You can see what’s happening when enabling debug mode. The blue outlines are the <li>s being scrolled in the <ul>
The covers enter the scrollport from the right, and exit it on the left. You can see what’s happening when enabling debug mode. The blue outlines are the <li>s being scrolled in the <ul>
• • •
Missing some Tweet in this thread? You can try to
force a refresh
