Here's a little pure #CSS demo I made on @codepen a while back: clip element on #scroll https://codepen.io/thebabydino/pen/vEGBOrg

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

#cssScrollAnimation #scrollAnimation #clipPath #cssClipPath #code #coding #web #dev #webDevelopment #webDev #frontend #cssAnimation #scrollEffect

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: https://ko-fi.com/post/Pure-CSS-3D-parallax-on-scroll-H2H31MUQ0J

Patreon: https://www.patreon.com/posts/pure-css-3d-on-141272441

#CSS #scroll #3D #SVG #filter #css3d #svgFilter #scrollAnimation #code #web #dev #webDev #webDevelopment #frontend #coding

I made a little thing on @codepen :pure #CSS #scroll controlled swipe transition https://codepen.io/thebabydino/pen/azObZOe

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

Inspiration https://x.com/avanderpotte/status/1923382432784412771
(via @codrops motion highlights roundup)

cc @bramus

#scrollAnimation #code #coding #frontend #cssGradient #cssMask #conicGradient #cssMaths #maths #scrollEffect #cssGrid #web #dev #webDev #webDevelopment

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

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

#SVG #cssGrid #scrollAnimation #filter #svgFilter #cssFilter #cssLayout #3D #cssTransforms #code #coding #frontend #web #dev #webDev #webDevelopment

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 https://www.reddit.com/r/css/comments/1jyu76v/comment/mn2fibt/

Live on @codepen https://codepen.io/thebabydino/pen/dPPbmao

Also uses container queries, CSS trigonometric functions.

#CSS #scroll #cssAnimation #code #web #scrollAnimation #frontend #coding #dev #cssVariables #cssTransform #webDev #webDevelopment #cssMaths #trigonometry

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 https://codepen.io/thebabydino/pen/XJWxLWV

cc @bramus

#CSS #scroll #scrollAnimation #coding #cssAnimation #gradientText #frontend #web #dev #webDev #webDevelopment #code

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

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

Made with 🖤 for this week's #CodePenChallenge.

cc @bramus

#SVG #cssGrid #scrollAnimation #filter #svgFilter #cssFilter #cssLayout #3D #cssTransforms #code #coding #frontend #web #dev #webDev #webDevelopment

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)

#css #scrollAnimation

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

Check it out on @codepen

https://codepen.io/thebabydino/pen/jENzprY

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

Chromium only.

#scroll #scrollAnimation #cssVariables #cssGrid #cssLayout #cssMaths #containerQueryUnits #svgFilter #SVG #filter #code #coding #frontend #webDev #webDEvelopment #web #dev