#scrollanimation — Public Fediverse posts

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

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

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

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

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

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

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

Made a scroll bar buddy that walks down the page when you scroll — https://focusfurnace.com/scroll_buddy.html
#HackerNews #ScrollBarBuddy #ScrollAnimation #WebDevelopment #UXDesign #TechInnovation

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

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

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

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

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

https://codepen.io/thebabydino/full/zYJKRyq

Also an entry for this week's #CodePenChallenge.

#cssShapes #code #coding #frontend #web #dev #webDev #webDevelopment #scroll #scrollAnimation #trigonometry

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

https://codepen.io/thebabydino/full/zYJKRyq

Also an entry for this week's #CodePenChallenge.

#cssShapes #code #coding #frontend #web #dev #webDev #webDevelopment #scroll #scrollAnimation #trigonometry

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

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

#SVG #CSS #filter #scroll #progress #code #svgFilter #scrollAnimation #coding #web #dev #webDev #webDevelopment #frontend

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

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

#SVG #CSS #filter #scroll #progress #code #svgFilter #scrollAnimation #coding #web #dev #webDev #webDevelopment #frontend

Scroll-driven animations are still behind a flag in Firefox and I'm already filing bugs 🪲 https://bugzilla.mozilla.org/show_bug.cgi?id=1927325

#CSS #scroll #scrollAnimation #coding #frontent #webDevelopment #webDev #web #dev #code

Scroll-driven animations are still behind a flag in Firefox and I'm already filing bugs 🪲 https://bugzilla.mozilla.org/show_bug.cgi?id=1927325

#CSS #scroll #scrollAnimation #coding #frontent #webDevelopment #webDev #web #dev #code

#TIL: 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 https://codepen.io/thebabydino/pen/abeyjPm?editors=0111

#scroll #scrollAnimation #code #coding #web #dev #webDev #webDevelopment #frontend

#TIL: 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 https://codepen.io/thebabydino/pen/abeyjPm?editors=0111

#scroll #scrollAnimation #code #coding #web #dev #webDev #webDevelopment #frontend

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

Here with pure #CSS 🤯 using scroll-driven animations

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

#scroll #scrollAnimation #code #coding #frontend #webDevelopment #web #dev #webDev

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

Here with pure #CSS 🤯 using scroll-driven animations

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

#scroll #scrollAnimation #code #coding #frontend #webDevelopment #web #dev #webDev

If you like this kind of stuff, pure #CSS on #scroll effects, you can find tens more under this tag 🏷️ on @codepen

🪄
https://codepen.io/thebabydino/pens/tags/?selected_tag=css-scroll-animation
✨

#scroll #scrollAnimation #SVG #filter #svgFilter #noJS #code #coding #web #dev #webDev #webDevelopment #frontend

If you like this kind of stuff, pure #CSS on #scroll effects, you can find tens more under this tag 🏷️ on @codepen

🪄
https://codepen.io/thebabydino/pens/tags/?selected_tag=css-scroll-animation
✨

#scroll #scrollAnimation #SVG #filter #svgFilter #noJS #code #coding #web #dev #webDev #webDevelopment #frontend

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

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

Check out the demo on @codepen
✨ https://codepen.io/thebabydino/pen/WNqJXXa

cc @bramus

#scroll #scrollAnimation #code #coding #cssVariables #frontend #web #dev #webDevelopment #webDev

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

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

Check out the demo on @codepen
✨ https://codepen.io/thebabydino/pen/WNqJXXa

cc @bramus

#scroll #scrollAnimation #code #coding #cssVariables #frontend #web #dev #webDevelopment #webDev

Pure CSS on scroll reveal & parallax effects on @codepen
https://codepen.io/thebabydino/pen/abgOxaW

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

#CSS #pureCSS #scroll #reveal #scrollAnimation #scrollEffect #code #coding #frontend #web #webDev #webDevelopment #dev

Pure CSS on scroll reveal & parallax effects on @codepen
https://codepen.io/thebabydino/pen/abgOxaW

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

#CSS #pureCSS #scroll #reveal #scrollAnimation #scrollEffect #code #coding #frontend #web #webDev #webDevelopment #dev

You seem to like the no JS char by char on scroll reveal effect https://mastodon.social/@anatudor/112551564705281523 so here's a gallery of various such effects on
@codepen https://codepen.io/thebabydino/pen/KKLWBJZ

Which is your fave? I oscillate between undissolve & wave.🤔

Also an entry for this week's #CodePenChallenge.

Inspired by Inspired by a @codrops demo https://tympanus.net/Development/ScrollBlurTypography/

cc @bramus

#scroll #reveal #revealEffect #scrollAnimation #noJS #CSS #SVG #filter #svgFilter #textEffect #code #coding #frontend #web #webDev #dev

You seem to like the no JS char by char on scroll reveal effect https://mastodon.social/@anatudor/112551564705281523 so here's a gallery of various such effects on
@codepen https://codepen.io/thebabydino/pen/KKLWBJZ

Which is your fave? I oscillate between undissolve & wave.🤔

Also an entry for this week's #CodePenChallenge.

Inspired by Inspired by a @codrops demo https://tympanus.net/Development/ScrollBlurTypography/

cc @bramus

#scroll #reveal #revealEffect #scrollAnimation #noJS #CSS #SVG #filter #svgFilter #textEffect #code #coding #frontend #web #webDev #dev

Another pure CSS & SVG thing I made on @codepen last week for the #CodePenChallenge: https://codepen.io/thebabydino/pen/yLWjMWB

Idea from https://codepen.io/gabrielcojea/pen/GRoqOYm but using no JS for scroll-triggered transitions and no text duplication for the dynamic headline-image intersection.

cc @bramus

#CodePen #CSS #scroll #SVG #filter #svgFilter #scrollAnimation #scrollEffect #textEffect #code #coding #frontend #web #webDev #dev #webDevelopment

Another pure CSS & SVG thing I made on @codepen last week for the #CodePenChallenge: https://codepen.io/thebabydino/pen/yLWjMWB

Idea from https://codepen.io/gabrielcojea/pen/GRoqOYm but using no JS for scroll-triggered transitions and no text duplication for the dynamic headline-image intersection.

cc @bramus

#CodePen #CSS #scroll #SVG #filter #svgFilter #scrollAnimation #scrollEffect #textEffect #code #coding #frontend #web #webDev #dev #webDevelopment

Somehow forgot to post this @codepen demo https://codepen.io/thebabydino/pen/dyEVGrx, which fits both most recent #CodePenChallenge weeks.

It's a version of this demo by @bramus https://scroll-driven-animations.style/demos/cover-flow/css/, but relying on CSS 3D (transforms) instead of `z-index` for z-axis order.

#CSS #3d #transform #maths #cssTransition #scroll #scrollEffect #scrollAnimation #code #coding #frontend #cssVariables #web #webDev #dev #webDevelopment

Somehow forgot to post this @codepen demo https://codepen.io/thebabydino/pen/dyEVGrx, which fits both most recent #CodePenChallenge weeks.

It's a version of this demo by @bramus https://scroll-driven-animations.style/demos/cover-flow/css/, but relying on CSS 3D (transforms) instead of `z-index` for z-axis order.

#CSS #3d #transform #maths #cssTransition #scroll #scrollEffect #scrollAnimation #code #coding #frontend #cssVariables #web #webDev #dev #webDevelopment

If you're a patron on Patreon, then you may have seen the solution over a year ago. Here it is now public for everyone to see on @codepen: https://codepen.io/thebabydino/pen/rNqPGMM

Also an entry for this week's #CodePenChallenge (scroll snapping).

#scroll #scrollAnimation #scrollEffect #diagonal #angled #code #coding #pureCSS #CSS #frontend #CodePen #web #webDev #wbDevelopment #dev #cats #bigCat

If you're a patron on Patreon, then you may have seen the solution over a year ago. Here it is now public for everyone to see on @codepen: https://codepen.io/thebabydino/pen/rNqPGMM

Also an entry for this week's #CodePenChallenge (scroll snapping).

#scroll #scrollAnimation #scrollEffect #diagonal #angled #code #coding #pureCSS #CSS #frontend #CodePen #web #webDev #wbDevelopment #dev #cats #bigCat

If you like scroll-driven animation demos, you can find all of my public ones under this tag on @codepen https://codepen.io/thebabydino/pens/tags/?selected_tag=css-scroll-animation

A bunch more non-public ones got posted on Patreon and I finally took the time to put them all in a collection https://www.patreon.com/collection/577732?view=expanded

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

If you like scroll-driven animation demos, you can find all of my public ones under this tag on @codepen https://codepen.io/thebabydino/pens/tags/?selected_tag=css-scroll-animation

A bunch more non-public ones got posted on Patreon and I finally took the time to put them all in a collection https://www.patreon.com/collection/577732?view=expanded

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

My pure CSS entry for this week's #CodePenChallenge: scroll progress indicator that's a nav bar in disguise.

Smooth scrolling, pure CSS scroll-driven animations, CSS variables and more, all in one @codepen demo https://codepen.io/thebabydino/full/gOJWwZX

See description for support info.

#scroll #scrollAnimation #pureCSS #css #smoothScroll #code #coding #frontend #web #webDev #webDevelopment #dev

My pure CSS entry for this week's #CodePenChallenge: scroll progress indicator that's a nav bar in disguise.

Smooth scrolling, pure CSS scroll-driven animations, CSS variables and more, all in one @codepen demo https://codepen.io/thebabydino/full/gOJWwZX

See description for support info.

#scroll #scrollAnimation #pureCSS #css #smoothScroll #code #coding #frontend #web #webDev #webDevelopment #dev

And here's a pure CSS on scroll char by char text reveal that depends not on the full page scroll, but on the element coming into view!

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

No text duplication, no splitting text into individual characters.

#CSS #pureCSS #noJS #scroll #scrollAnimation #text #textEffect #revealEffect #code #coding #frontend #webDev #web #webDevelopment #dev

And here's a pure CSS on scroll char by char text reveal that depends not on the full page scroll, but on the element coming into view!

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

No text duplication, no splitting text into individual characters.

#CSS #pureCSS #noJS #scroll #scrollAnimation #text #textEffect #revealEffect #code #coding #frontend #webDev #web #webDevelopment #dev

We do that by setting `animation-timeline: scroll()`.

We also remove the `animation-iteration-count`. We could also remove the `animation-duration`... except it doesn't work in Firefox without it for some reason.
¯\_(ツ)_/¯

A Firefox bug is also why the `animation-fill-mode`.

#CSS #pureCSS #noJS #scroll #scrollAnimation #text #textEffect #revealEffect #code #coding #frontend #webDev #web #webDevelopment #dev #cssAnimation

We do that by setting `animation-timeline: scroll()`.

We also remove the `animation-iteration-count`. We could also remove the `animation-duration`... except it doesn't work in Firefox without it for some reason.
¯\_(ツ)_/¯

A Firefox bug is also why the `animation-fill-mode`.

#CSS #pureCSS #noJS #scroll #scrollAnimation #text #textEffect #revealEffect #code #coding #frontend #webDev #web #webDevelopment #dev #cssAnimation

It *still* doesn't look right, so we change the end state background width from `100%` to `calc(var(--n)*1ch)`.

We also add in a `background-color`. We now have our char by char text reveal!

But this just runs infinitely on its own, so we still need to tie it to page scroll.

#CSS #pureCSS #noJS #scroll #scrollAnimation #text #textEffect #revealEffect #code #coding #frontend #webDev #web #webDevelopment #dev #cssAnimation

It *still* doesn't look right, so we change the end state background width from `100%` to `calc(var(--n)*1ch)`.

We also add in a `background-color`. We now have our char by char text reveal!

But this just runs infinitely on its own, so we still need to tie it to page scroll.

#CSS #pureCSS #noJS #scroll #scrollAnimation #text #textEffect #revealEffect #code #coding #frontend #webDev #web #webDevelopment #dev #cssAnimation

Let's animate the `background-size` of this gradient (which we also make non-repeating) along the x axis.

Then we clip this background to `text`.

We make the animation go char by char by using `steps(var(--n))`, where n is the text length, set by an HTML preprocessor as `--n`.

#CSS #pureCSS #noJS #scroll #scrollAnimation #text #textEffect #revealEffect #code #coding #frontend #webDev #web #webDevelopment #dev #cssAnimation

Let's animate the `background-size` of this gradient (which we also make non-repeating) along the x axis.

Then we clip this background to `text`.

We make the animation go char by char by using `steps(var(--n))`, where n is the text length, set by an HTML preprocessor as `--n`.

#CSS #pureCSS #noJS #scroll #scrollAnimation #text #textEffect #revealEffect #code #coding #frontend #webDev #web #webDevelopment #dev #cssAnimation

Adding a gradient! There's a difference between block and inline elements when it comes to horizontal gradients.

Block element: gradient goes from left to right edge of the box.

Inline element: gradient wraps/ progresses with the wrapping text.

You may be seeing where this is going...

#CSS #pureCSS #noJS #scroll #scrollAnimation #text #textEffect #revealEffect #code #coding #frontend #webDev #web #webDevelopment #dev #cssAnimation