More CSS random() Learning Through Experiments

https://fed.brid.gy/r/https://frontendmasters.com/blog/more-css-random-learning-through-experiments/

#Development #Guides
Building a multi-stage timetable · How modern CSS powers a cutting-edge layout https://ilo.im/168i5y

_____
#ModernCSS #CssGrid #CssSubgrid #ScrollDrivenAnimations #Calendar #Browser #WebDev #Frontend #HTML #CSS

Numbers That Fall (Scroll-Driven Animations & Sibling Index)

https://fed.brid.gy/r/https://frontendmasters.com/blog/numbers-that-fall-scroll-driven-animations-sibling-index/

The recording of my talk “Scroll-Driven Animations with CSS” which I gave at the wonderful #JSHeroes is available to watch: https://www.youtube.com/watch?v=9Q9lsFycfis

You can find the slides (+ a write-up) on my blog: https://www.bram.us/2025/05/31/scroll-driven-animations-with-css-jsheroes/

Thanks again to the organizers for having me 😊 – Mulțumesc!

#CSS #ScrollDrivenAnimations

I just gave a presentation in our company meeting on my #ScrollDrivenAnimations and #ViewTransitions prototypes and now I think I need a lie down. #CSS #JS

🔵 Nerding out about CSS with Adam Argyle @nerdy.dev
Host: @kevinpowell
In this chapter, they discuss exciting new features of CSS for 2024, discussing innovations such as #ScrollDrivenAnimations, #AnchorPositioning, and #FieldSizing.
#css #webdev

https://youtu.be/rE-qmyPHHGw?si=C50tyATWuyFIUjbi

Scroll-Driven & Fixed

https://fed.brid.gy/r/https://frontendmasters.com/blog/scroll-driven-fixed/

🟠 Web-Slinger.css:

Like Wow.js But With CSS-y Scroll Animations

by Lee Meyer @LeeMeyer at @csstricks
#ScrollDrivenAnimations #js #webdev

https://css-tricks.com/web-slinger-css-like-wow-js-but-with-css-y-scroll-animations/

🧧 Unleash the Power of Scroll-Driven Animations

by Geoff Graham @geoffreygraham @geoff at @css

#ScrollDrivenAnimations #css #webdev

https://css-tricks.com/unleash-the-power-of-scroll-driven-animations/

#Development #Techniques
Custom range slider · Made with CSS anchor positioning/scroll-driven animations https://ilo.im/15zv03

_____
#ModernCSS #Slider #RangeSlider #Tooltip #Browser #WebDev #Frontend #CSS #AnchorPositioning #ScrollDrivenAnimations

🔴🟢 Animate elements on scroll with Scroll-driven animations
by Bramus
@bramus @bramus@front-end.social
#ScrollDrivenAnimations
Demos:
https://scroll-driven-animations.style/
Article:
https://developer.chrome.com/docs/css-ui/scroll-driven-animations

⭐️ Scroll-Driven Animations with CSS (2024.05.30 @ WebExpo)

Slides of the talk “Scroll-Driven Animations with CSS” I gave at @webexpo today.

https://www.bram.us/2024/05/30/scroll-driven-animations-with-css-webexpo/

#CSS #ScrollDrivenAnimations #PublicSpeaking

🟠🟣 Unleash the power of Scroll-Driven Animations (10 videos)
by Bramus Van Damme @bramus at @ChromiumDev
#webdev #ScrollDrivenAnimations #Learning

https://www.youtube.com/playlist?list=PLNYkxOF6rcICM3ttukz9x5LCNOHfWBVnn

🟠🟡 If View Transitions and Scroll-Driven Animations had a baby …
By @bramus
(2024.04.25 @ @css__cafe )
#ViewTransitions #ScrollDrivenAnimations #css #webdev

https://www.bram.us/2024/04/29/if-view-transitions-and-scroll-driven-animations-had-a-baby-css-cafe/

Almost ready for tonight's @fronteers (BE) meetup …

#Fronteers #ChromeDevRel #ViewTransitions #ScrollDrivenAnimations

Subtle #ScrollDrivenAnimations that no one should notice 🫣

#PhanpySocialDev

I got carried away last night after reading @bramus post on scroll direction detection using #CSS #scrollDrivenAnimations. It turns out you can control #pixelArt sprites in 8 directions! With zero #JS!

https://jamesbasoo.com/blog/scroll-driven-pixel-art-sprite/

For those wondering, it's quite "simple" to add this cool effect (~14 lines), though took me few hours to understand how the range works.

This tool helps a lot: https://scroll-driven-animations.style/tools/view-timeline/ranges/

#CSS #ScrollDrivenAnimations

✪ Solved by CSS Scroll-Driven Animations: Style an element based on the active Scroll Direction and Scroll Speed
by @bramus @bramus@front-end.social
#animation #ScrollDrivenAnimations #ScrollDirection #ScrollSpeed #webdev

https://www.bram.us/2023/10/23/css-scroll-detection/

New blogpost: “Run a Scroll-Driven Animation only once”

Scroll-Driven Animations are controlled by scroll: as you scroll up and down, the animation will scrub forwards and back, in direct response. But what if you want a scroll-driven animation to stay on its endframe once it was entirely played? Let this little piece of JavaScript help you out …

🔗 https://bram.us/2023/10/05/run-a-scroll-driven-animation-only-once/

#CSS #JavaScript #ScrollDrivenAnimations