#scrollAnimation

Ana Tudor 🐯anatudor
2025-12-17

Here's a little pure demo I made on @codepen a while back: clip element on codepen.io/thebabydino/pen/vEG

(using scroll-driven animations, so support may still be spotty)

Ana Tudor 🐯anatudor
2025-10-15

If you're a Cheetah+ supporter on Ko-fi or Patreon, then first of all thank you for helping me stay afloat during these times.

And second, I just posted a cool little pure CSS 3D thing.

Ko-fi: ko-fi.com/post/Pure-CSS-3D-par

Patreon: patreon.com/posts/pure-css-3d-

Two kittens with a "Thank you" sign with paw marks.
Ana Tudor 🐯anatudor
2025-06-01

I made a little thing on @codepen :pure controlled swipe transition codepen.io/thebabydino/pen/azO

Note how the swipe always clockwise, regardless of scroll direction and how the text fades in after the swipe in.

Inspiration x.com/avanderpotte/status/1923
(via @codrops motion highlights roundup)

cc @bramus

Ana Tudor 🐯anatudor
2025-04-28

Haven't had it in me to do anything for the past week's , so here's a demo from earlier this year that fits: infinite scroll gallery codepen.io/thebabydino/pen/XJr

One of my most hearted demos ever & my only one to get over 1000 ❤️ without being in the most hearted of previous year.

Ana Tudor 🐯anatudor
2025-04-15

A fun little scroll-driven thing I made. The text is white over the image, but the image isn't static, it rotates on scroll. 😼

Here's a detailed explanation of the how behind reddit.com/r/css/comments/1jyu

Live on @codepen codepen.io/thebabydino/pen/dPP

Also uses container queries, CSS trigonometric functions.

Ana Tudor 🐯anatudor
2025-03-31

Here's a neat little effect with no text duplication. Uses `background-clip: text` to create the split text face effect + scroll-driven animations to tie the gradient split line position to the 1st section's bottom edge.

Live on @codepen codepen.io/thebabydino/pen/XJW

cc @bramus

Hacker Newsh4ckernews
2025-03-03
Ana Tudor 🐯anatudor
2025-01-17

I made a thing: scroll-driven, almost pure infinite circular gallery rotation - check it out on @codepen
codepen.io/thebabydino/pen/XJr

Using scroll-driven animations and the tiniest bit of JS for the infinity part of it.

Made with 🖤 for this week's .

cc @bramus

Ana Tudor 🐯anatudor
2025-01-13

It got picked 😊

... and I've made it work in Firefox too 😃 (if the layout.css.scroll-driven-animations.enabled flag is set to true in about:config)

CodePen Activity screenshot letting me know my demo was picked and added to the challenge collection.
Ana Tudor 🐯anatudor
2025-01-13

Here's a little thing I made for the 1st of '25: pure tilt & zoom grid on scroll!

Check it out on @codepen

codepen.io/thebabydino/pen/jEN

Using pure CSS scroll driven animations, grid, variables, mathematical functions, container query units. Also uses an SVG filter for the dissolve effect.

Chromium only.

Ana Tudor 🐯anatudor
2025-01-08

A little something combining shapes, trigonometry, plus scroll-driven animations on @codepen: angled slide!

codepen.io/thebabydino/full/zY

Also an entry for this week's .

pablolarahpablolarah
2025-01-02

🔵 Pure CSS vertical scroll, horizontal slide
by Ana Tudor
@anatudor
at @codepen.io

codepen.io/thebabydino/full/WN

Ana Tudor 🐯anatudor
2024-11-26

Looks like I took over the Trending section of @codepen 😼

15 out of the 24 demos on the first 6 pages are mine! 😯

Ana Tudor 🐯anatudor
2024-10-27

Scroll-driven animations are still behind a flag in Firefox and I'm already filing bugs 🪲 bugzilla.mozilla.org/show_bug.

Ana Tudor 🐯anatudor
2024-10-21

: apparently scroll-driven animations don't trigger animationend when I've scrolled to the bottom of the page?

You can still trigger a transition event codepen.io/thebabydino/pen/abe

Ana Tudor 🐯anatudor
2024-10-19

The seventh is a fancy effect you may have seen on some websites: making a section slide horizontally on vertical scroll!

Here with pure 🤯 using scroll-driven animations

codepen.io/thebabydino/pen/WNq

Ana Tudor 🐯anatudor
2024-08-25
Ana Tudor 🐯anatudor
2024-08-23

What is this dark magic? 🪄 It's pure horizontal slide on vertical scroll mix!

With scroll-driven animations + `position: sticky`! 😼

Check out the demo on @codepen
codepen.io/thebabydino/pen/WNq

cc @bramus

Ana Tudor 🐯anatudor
2024-07-19

Pure CSS on scroll reveal & parallax effects on @codepen
codepen.io/thebabydino/pen/abg

Pay attention to how images slide within their own element boxes 😼

Saw a demo using JS for this parallax effect and... I seem to be on a mission to redo every scroll effect in pure CSS.

cc @bramus

Client Info

Server: https://mastodon.social
Version: 2025.07
Repository: https://github.com/cyevgeniy/lmst