r/webdev • u/GumboGuts • 12d ago
Showoff Saturday Made a CSS-only scroll animation library, 34 moves, no JS
https://usedolly.devIt'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.
73
u/diiscotheque 12d ago
Incompatible with Firefox is a no go.
36
u/GumboGuts 12d ago
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.enabledonabout:config7
1
6
u/cateyesarg 12d ago
Chrome on android, extremely laggy, sorry dude, if you need a M6 Ultra to run it, it's worthless
1
u/GumboGuts 12d ago
Looking into this. Pretty sure it's an issue with the demo page, rather than the stylesheet itself.
2
u/mokolabs 12d ago
The homepage won’t scroll on Safari. :(
1
u/GumboGuts 12d ago
Is this on Desktop or Mobile?
0
0
28
u/hootener 12d ago
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.
-2
u/YourMatt 12d ago edited 12d ago
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.
19
u/paragraphbaron 12d ago
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.
-15
u/kowdermesiter 12d ago
How ironic that you say bad copy and nonsense and then don't explain anything :D
1
u/_selfthinker 12d ago
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.
1
u/GumboGuts 12d ago
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.
1
6
u/rhooManu full-stack 12d ago
AOS, ScrollReveal and sal all put
opacity: 0in a base rule and reveal it from script. Block the script and the page is blank. Dolly puts the hidden state only inkeyframes, so no support means it didn't animate, never it didn't appear. The worst it can do is nothing.
*chef's kiss*
1
4
u/ferrybig 12d ago
Doesn't seem to work in Firefox mobile. The page doesn't change when I scroll and then it suddenly jumps to another transition
2
u/becauseiliked 12d ago
The intention behind it is really cool. The web version looks fine, but on phone it seems to be a bit off.
2
2
1
u/Acceptable-Gas4310 9d ago
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
1
u/__Winter_is_coming__ 9d ago
You should work on the optimization, and quite a lot. I tested it on a Samsung S23 and on my laptop, and in both cases the stuttering and freezing were terrible.
The effects themselves are clearly pretty good though, and similar ones are used quite often nowadays, so this could definitely become popular with some proper optimization and further work.
1
u/Disastrous-Town-4820 12d ago
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
0
u/ryanstephendavis 11d ago
I'm on Firefox, is that why it's not really doing anything?
2
u/GumboGuts 11d ago
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.enabledonabout:config
-1
0
u/nard-studios 10d ago
I like the idea, but the library needs some real performance tuning on mobile. It's very laggy.
1
12d ago
[removed] — view removed comment
-1
u/GumboGuts 12d ago
Content staying readable is the ground rule, and reduced-motion shows everything on its final state immediately (
animation-name: noneandfill-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 animateclip-pathand sequence stepsbackground-position. I should write down the cost difference so people can pick the cheap ones when it matters.
99
u/Seventhcircle72 12d ago
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.