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
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
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)
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
🔵 Pure CSS vertical scroll, horizontal slide
by Ana Tudor
@anatudor
at @codepen.io
#scroll #scrolldrivenanimation #scrollAnimation #webdev
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
#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
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
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
🟢 Replacing gsap with scroll animations
by Dom Jay @dominickjay
#ScrollAnimation #css #webdev
https://dominickjay.com/writing/replace-gsap-wth-scroll-animations/
