So I saw a demo in the @codepen Spark and I liked the idea, but it was too JS-heavy for my taste, plus I would have preferred the rotation animations to be "hinged" around the top/ bottom edge depending on direction.

So I did it with pure #CSS on scroll https://codepen.io/thebabydino/pen/JoKqRjZ

cc @bramus

#cssScrollAnimation #scrollEffect #code #cssTransforms #cssTransform #css3D #3D #coding #frontend #cssLayout #web #dev #webDev #webDevelopment #cssGrid #cssFlex #flexbox #cssVariables #cssTransition

Someone hearted a Pen I made over a year ago, a no library, minimal JS version of another I found on @codepen.

At the time, it didn't work in Firefox as it was transitioning custom properties and support for :has() there was spotty.

Now it's cross-browser codepen.io/thebabydino/pen/gOqYdJd

#CSS #cssTransition #mask #cssMask #revealEffect #textEffects #textEffect #code #coding #frontend #webDevelopment #web #dev #webDev

#Development #Hacks
Beating ‘!important’ user agent styles (sort of) · How CSS transitions make the impossible possible https://ilo.im/15zqnb

_____
#UserAgent #Stylesheet #CssCascade #CssTransition #CssCalc #CssConstant #Browser #WebDev #Frontend #CSS

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

#Development #Guides
CSS Transition vs. CSS Animation · Similarities and differences of two animating techniques https://ilo.im/15aj5q

_____
#WebDev #Animation #Frontend #CSS #CssTransition #CssAnimation