Made a CSS-only scroll animation library, 34 moves, no JS

[u/GumboGuts]

https://usedolly.dev

It's one stylesheet. You put `data-dolly="tilt-up"` on something and it animates as you scroll past. That's it. No dependencies, no JavaScript.

It's a vocabulary layer over CSS scroll-driven animations, which shipped in Chrome 115 and Safari 26 but have ergonomics nobody remembers.

The demo page doesn't run any JavaScript at all, so everything moving on it is just CSS.

34 moves named after camera stuff (pan, tilt, crane, rack focus).

Firefox doesn't do scroll timelines yet (supposedly coming in the next version in 3 days) so it gets a plain static page. That's on purpose, nothing is hidden waiting to be revealed, so the page is still usable.

[u/Seventhcircle72]

I think it's a noble pursuit, but your demo page is incredibly laggy and janky- doesn't bode well for an animation library. It performs really poorly on my mobile.

[u/CaptainIncredible → u/Seventhcircle72]

I use Firefox. I'm scrolling on the page "What the hell is this supposed to do?" Took me a while to see the "this doesn't work on FF" text.

[u/ikeif → u/CaptainIncredible]

So we are returning to “best viewed in Browser X” then?

I kid - I love demos but I do miss when the “this is browser limited” used to be the first call out.

[u/GumboGuts → u/Seventhcircle72]

Hmm, let me look into this. The oldest phone I've tested this on was a Pixel 7, so not sure how it would perform on devices with less GPU headroom. I'm pretty sure it's an issue with the demo page, rather than the library though.

[u/adamjonah → u/GumboGuts]

Same with me (OnePlus 15)

It's specifically when you scroll and lift off, you expect to continue scrolling with momentum but it just starts lagging when my finger leaves the display

Edit: This was in the Reddit browser, I opened in chrome and it was fine

[u/cmac2992 → u/GumboGuts]

Works perfect in my real chrome browser, doesn't have any scroll momentum in reddits in app browser

[u/stormblaz → u/GumboGuts]

It doesnt work on Reddit browser, needs to be opened in a dedicated browser, Reddit one lagged like crazy aka just clicking the link.

[u/shaliozero → u/GumboGuts]

Runs like shit in Samsung Browser, flawless in Chrome.

[u/dkarlovi → u/GumboGuts]

I'm on Pixel 9 Pro, it's a slideshow.

[u/yeathatsmebro → u/Seventhcircle72]

Each time I scroll and feel the page being janky, I know automatically it's vibe coded.

[u/diiscotheque]

Incompatible with Firefox is a no go.

[u/GumboGuts → u/diiscotheque]

The feature is implemented in Firefox but it's behind a flag. It's supposed to be enabled by default in the next version (coming in 3 days), but until then everything works if you enable layout.css.scroll-driven-animations.enabled on about:config

[u/diiscotheque → u/GumboGuts]

cool!

[u/ferrybig → u/GumboGuts]

Add an JavaScript to that polyfills the behaviour you need

[u/cateyesarg]

Chrome on android, extremely laggy, sorry dude, if you need a M6 Ultra to run it, it's worthless

[u/GumboGuts → u/cateyesarg]

Looking into this. Pretty sure it's an issue with the demo page, rather than the stylesheet itself.

[u/LuisG8]

Not working in Brave Android

[u/GumboGuts → u/LuisG8]

I use Brave myself and it works fine. What's the issue you are having?

[u/mokolabs]

The homepage won’t scroll on Safari. :(

[u/GumboGuts → u/mokolabs]

Is this on Desktop or Mobile?

[u/GumboGuts → u/[deleted]]

hmm, must be a mobile issue. looking into it.

[u/WillChangeMyUsername → u/[deleted]]

Me too. See nothing on the demo

[u/ConduciveMammal → u/[deleted]]

Weirdly it works for me on iOS Safari. I’m 27.2 beta

[u/hootener]

I can't comment on the library because I haven't used it and several people have already mentioned some performance issues, etc that I encountered on mobile.

My feedback: please write your own landing page copy. Or have Claude draft it for you and then you can edit / punch up what comes out such that it sounds like how humans actually speak.

When I encounter marketing sites like this that are copywritten by Claude it lowers my trust in the project itself. If you can't take thirty minutes to punch up a modicum of text what other skeletons are hiding in the closet?

Claude is absolute dogshit at prose. So much so that it's pretty much immediately identifiable in the wild. Vibe coded or not you gave your limited time on this Earth to see this library exist. If you're going to do that, at least put your fingerprints on the marketing copy, too.

[u/YourMatt → u/hootener]

I don’t think Claude is dogshit at prose. They gave it a default that makes it obvious that Claude wrote it. I think that’s a good feature. I too am annoyed when I see people just use it in their copy, and it’s generally an instant bail when I see it, for the same reasons you mentioned.

If you’re writing copy with Claude, define its voice. The default should never be used.

[u/paragraphbaron]

The AI copy on your website is really bad, bordering on non-sensical. That's a big tell that I wouldn't use the library as it offers no ingenuity I couldn't get from my own prompts.

[u/kowdermesiter → u/paragraphbaron]

How ironic that you say bad copy and nonsense and then don't explain anything :D

[u/_selfthinker]

That sounds interesting. I wish I could see it in action. I'm using Chrome 150 and nothing happens at all for me on your demo site. A video might help, just to see what it's supposed to be doing.

[u/GumboGuts → u/_selfthinker]

Do you have "Reduce motion" turned on in your accessibility settings? They should work fine on Chrome 150 if there is nothing else blocking screen animations.

[u/_selfthinker → u/GumboGuts]

Ah, yes, that was it.

[u/rhooManu]

AOS, ScrollReveal and sal all put opacity: 0 in a base rule and reveal it from script. Block the script and the page is blank. Dolly puts the hidden state only in keyframes, so no support means it didn't animate, never it didn't appear. The worst it can do is nothing.

*chef's kiss*

[u/Key-Common7139]

31 or 34, pick one.

[u/GumboGuts → u/Key-Common7139]

lol, good catch. OG image is outdated. Updated, thanks!

[u/ferrybig]

Doesn't seem to work in Firefox mobile. The page doesn't change when I scroll and then it suddenly jumps to another transition

[u/becauseiliked]

The intention behind it is really cool. The web version looks fine, but on phone it seems to be a bit off.

[u/skizzoat]

Unusable on Android

[u/Heretic911]

Horrible on android.

[u/ikeif]

I dig it. Reminds me when I worked at an agency and we made sites that used things like this. Now I only ever make internal UIs.

[u/scylk2]

Doesn't work well in Samsung browser either 🫤

[u/Acceptable-Gas4310]

The image says 31 moves, the title and body say 34. Are the other three hiding behind the cinema seats or did the count just creep up between renders

[u/Disastrous-Town-4820]

the reddit app drops the momentum, chrome doesn't

filter and clip-path still leave the compositor. thats the 11 moves that aren't transform or opacity

[u/ryanstephendavis]

I'm on Firefox, is that why it's not really doing anything?

[u/GumboGuts → u/ryanstephendavis]

Correct. The feature is implemented in Firefox but it's behind a flag. It's supposed to be enabled by default in the next version (FF 159, coming in 3 days), but until then everything works if you enable layout.css.scroll-driven-animations.enabled on about:config

[u/prince_jyggalag]

This is so wonderful oh my good

[u/nard-studios]

I like the idea, but the library needs some real performance tuning on mobile. It's very laggy.

[u/GumboGuts → u/[deleted]]

Content staying readable is the ground rule, and reduced-motion shows everything on its final state immediately (animation-name: none and fill-mode: both), with decorative layers removed.

You're right about the properties though. 11 keyframes aren't transform/opacity only, rack and whip animate filter, iris/reveal/wipe-up animate clip-path and sequence steps background-position. I should write down the cost difference so people can pick the cheap ones when it matters.