home.social

#scrollanimation — Public Fediverse posts

Live and recent posts from across the Fediverse tagged #scrollanimation, aggregated by home.social.

  1. Ana Tudor 🐯 @[email protected] ·

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

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

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

    #css #scroll #cssscrollanimation #scrollanimation #clippath #cssclippath
  2. Ana Tudor 🐯 @[email protected] ·

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

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

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

    #css #scroll #cssscrollanimation #scrollanimation #clippath #cssclippath
  3. Ana Tudor 🐯 @[email protected] ·

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

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

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

    #css #scroll #cssscrollanimation #scrollanimation #clippath #cssclippath
  4. Ana Tudor 🐯 @[email protected] ·

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

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

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

    #scrolleffect #cssanimation #frontend #webdev #webdevelopment #dev
  5. Ana Tudor 🐯 @[email protected] ·

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

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

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

    #css #scroll #cssscrollanimation #scrollanimation #clippath #cssclippath
  6. Ana Tudor 🐯 @[email protected] ·

    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: ko-fi.com/post/Pure-CSS-3D-par

    Patreon: patreon.com/posts/pure-css-3d-

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

    #css #scroll #3d #svg #filter #css3d
  7. Ana Tudor 🐯 @[email protected] ·

    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: ko-fi.com/post/Pure-CSS-3D-par

    Patreon: patreon.com/posts/pure-css-3d-

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

    #css #scroll #3d #svg #filter #css3d
  8. Ana Tudor 🐯 @[email protected] ·

    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: ko-fi.com/post/Pure-CSS-3D-par

    Patreon: patreon.com/posts/pure-css-3d-

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

    #css #scroll #3d #svg #filter #css3d
  9. Ana Tudor 🐯 @[email protected] ·

    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: ko-fi.com/post/Pure-CSS-3D-par

    Patreon: patreon.com/posts/pure-css-3d-

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

    #css #scroll #3d #svg #filter #css3d
  10. Ana Tudor 🐯 @[email protected] ·

    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: ko-fi.com/post/Pure-CSS-3D-par

    Patreon: patreon.com/posts/pure-css-3d-

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

    #coding #frontend #webdevelopment #webdev #dev #web
  11. Ana Tudor 🐯 @[email protected] ·

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

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

    Inspiration x.com/avanderpotte/status/1923
    (via @codrops motion highlights roundup)

    cc @bramus

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

    #css #scroll #scrollanimation #code #coding #frontend
  12. Ana Tudor 🐯 @[email protected] ·

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

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

    Inspiration x.com/avanderpotte/status/1923
    (via @codrops motion highlights roundup)

    cc @bramus

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

    #css #scroll #scrollanimation #code #coding #frontend
  13. Ana Tudor 🐯 @[email protected] ·

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

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

    Inspiration x.com/avanderpotte/status/1923
    (via @codrops motion highlights roundup)

    cc @bramus

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

    #webdevelopment #webdev #dev #web #cssgrid #scrolleffect
  14. Ana Tudor 🐯 @[email protected] ·

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

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

    Inspiration x.com/avanderpotte/status/1923
    (via @codrops motion highlights roundup)

    cc @bramus

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

    #css #scroll #scrollanimation #code #coding #frontend
  15. Ana Tudor 🐯 @[email protected] ·

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

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

    Inspiration x.com/avanderpotte/status/1923
    (via @codrops motion highlights roundup)

    cc @bramus

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

    #css #scroll #scrollanimation #code #coding #frontend
  16. Ana Tudor 🐯 @[email protected] ·

    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 codepen.io/thebabydino/pen/XJr

    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

    #codepenchallenge #css #svg #cssgrid #scrollanimation #filter
  17. Ana Tudor 🐯 @[email protected] ·

    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 codepen.io/thebabydino/pen/XJr

    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

    #codepenchallenge #css #svg #cssgrid #scrollanimation #filter
  18. Ana Tudor 🐯 @[email protected] ·

    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 codepen.io/thebabydino/pen/XJr

    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

    #codepenchallenge #css #svg #cssgrid #scrollanimation #filter
  19. Ana Tudor 🐯 @[email protected] ·

    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 codepen.io/thebabydino/pen/XJr

    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

    #webdevelopment #webdev #dev #web #frontend #coding
  20. Ana Tudor 🐯 @[email protected] ·

    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 codepen.io/thebabydino/pen/XJr

    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

    #codepenchallenge #css #svg #cssgrid #scrollanimation #filter
  21. Ana Tudor 🐯 @[email protected] ·

    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 reddit.com/r/css/comments/1jyu

    Live on @codepen codepen.io/thebabydino/pen/dPP

    Also uses container queries, CSS trigonometric functions.

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

    #css #scroll #cssanimation #code #web #scrollanimation
  22. Ana Tudor 🐯 @[email protected] ·

    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 reddit.com/r/css/comments/1jyu

    Live on @codepen codepen.io/thebabydino/pen/dPP

    Also uses container queries, CSS trigonometric functions.

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

    #css #scroll #cssanimation #code #web #scrollanimation
  23. Ana Tudor 🐯 @[email protected] ·

    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 reddit.com/r/css/comments/1jyu

    Live on @codepen codepen.io/thebabydino/pen/dPP

    Also uses container queries, CSS trigonometric functions.

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

    #css #scroll #cssanimation #code #web #scrollanimation
  24. Ana Tudor 🐯 @[email protected] ·

    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 reddit.com/r/css/comments/1jyu

    Live on @codepen codepen.io/thebabydino/pen/dPP

    Also uses container queries, CSS trigonometric functions.

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

    #trigonometry #cssmaths #webdevelopment #webdev #csstransform #cssvariables
  25. Ana Tudor 🐯 @[email protected] ·

    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 reddit.com/r/css/comments/1jyu

    Live on @codepen codepen.io/thebabydino/pen/dPP

    Also uses container queries, CSS trigonometric functions.

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

    #css #scroll #cssanimation #code #web #scrollanimation
  26. Ana Tudor 🐯 @[email protected] ·

    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 codepen.io/thebabydino/pen/XJW

    cc @bramus

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

    #css #scroll #scrollanimation #coding #cssanimation #gradienttext
  27. Ana Tudor 🐯 @[email protected] ·

    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 codepen.io/thebabydino/pen/XJW

    cc @bramus

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

    #scrollanimation #coding #cssanimation #gradienttext #frontend #web
  28. Ana Tudor 🐯 @[email protected] ·

    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 codepen.io/thebabydino/pen/XJW

    cc @bramus

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

    #css #scroll #scrollanimation #coding #cssanimation #gradienttext
  29. Ana Tudor 🐯 @[email protected] ·

    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 codepen.io/thebabydino/pen/XJW

    cc @bramus

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

    #code #webdevelopment #webdev #dev #web #frontend
  30. Ana Tudor 🐯 @[email protected] ·

    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 codepen.io/thebabydino/pen/XJW

    cc @bramus

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

    #css #scroll #scrollanimation #coding #cssanimation #gradienttext
  31. Hacker News @[email protected] ·

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

    #hackernews #scrollbarbuddy #scrollanimation #webdevelopment #uxdesign #techinnovation
  32. Hacker News @[email protected] ·

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

    #techinnovation #uxdesign #webdevelopment #scrollanimation #scrollbarbuddy #hackernews
  33. Hacker News @[email protected] ·

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

    #hackernews #scrollbarbuddy #scrollanimation #webdevelopment #uxdesign #techinnovation
  34. Ana Tudor 🐯 @[email protected] ·

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

    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

    #css #codepenchallenge #svg #cssgrid #scrollanimation #filter
  35. Ana Tudor 🐯 @[email protected] ·

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

    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

    #css #codepenchallenge #svg #cssgrid #scrollanimation #filter
  36. Ana Tudor 🐯 @[email protected] ·

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

    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

    #css #codepenchallenge #svg #cssgrid #scrollanimation #filter
  37. Ana Tudor 🐯 @[email protected] ·

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

    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

    #webdevelopment #webdev #dev #web #frontend #coding
  38. Ana Tudor 🐯 @[email protected] ·

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

    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

    #css #codepenchallenge #svg #cssgrid #scrollanimation #filter
  39. Ana Tudor 🐯 @[email protected] ·

    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

    #css #scrollanimation
  40. Ana Tudor 🐯 @[email protected] ·

    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

    #css #scrollanimation
  41. Ana Tudor 🐯 @[email protected] ·

    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

    #css #scrollanimation
  42. Ana Tudor 🐯 @[email protected] ·

    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

    #scrollanimation #css
  43. Ana Tudor 🐯 @[email protected] ·

    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

    #css #scrollanimation
  44. Ana Tudor 🐯 @[email protected] ·

    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

    codepen.io/thebabydino/pen/jEN

    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

    #css #scroll #scrollanimation #cssvariables #cssgrid #csslayout
  45. Ana Tudor 🐯 @[email protected] ·

    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

    codepen.io/thebabydino/pen/jEN

    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

    #css #scroll #scrollanimation #cssvariables #cssgrid #csslayout
  46. Ana Tudor 🐯 @[email protected] ·

    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

    codepen.io/thebabydino/pen/jEN

    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

    #css #scroll #scrollanimation #cssvariables #cssgrid #csslayout
  47. Ana Tudor 🐯 @[email protected] ·

    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

    codepen.io/thebabydino/pen/jEN

    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

    #codepenchallenge #dev #web #webdevelopment #webdev #frontend
  48. Ana Tudor 🐯 @[email protected] ·

    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

    codepen.io/thebabydino/pen/jEN

    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

    #css #scroll #scrollanimation #cssvariables #cssgrid #csslayout
  49. Ana Tudor 🐯 @[email protected] ·

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

    codepen.io/thebabydino/full/zY

    Also an entry for this week's #CodePenChallenge.

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

    #css #codepenchallenge #cssshapes #code #coding #frontend
  50. Ana Tudor 🐯 @[email protected] ·

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

    codepen.io/thebabydino/full/zY

    Also an entry for this week's #CodePenChallenge.

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

    #css #codepenchallenge #cssshapes #code #coding #frontend