Mastodawn

Ana Tudor 🐯Feb 27

Here it is, my latest article again, unfucked https://frontendmasters.com/blog/nav-thumbnail-flip-image/

#CSS #cssScrollAnimation #code #web #frontend #coding #webDevelopment #dev #webDev

Lessons Learned from Failed Demos: Pure CSS Nav Thumb Flip on Scroll – Frontend Masters Blog

A list of items with thumbnails that flip into place as needed. Can we ditch the JavaScript?

Ana Tudor 🐯Feb 27

I start writing posts about demos I made and thought were cool all the time. While doing that, I keep finding faults with both the demos and posts, some of which I fix, some of which I can't. And then the (usually at that point 7K to 35K words writeup) dies. This time I published one anyway...

#CSS #cssScrollAnimation #coding #web #dev #webDev #webDevelopment #code #frontend

Ana Tudor 🐯Feb 17

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

Ana Tudor 🐯Feb 17

Hi, Mastodon 🦣 - could you help me out?

If you can test in actual Safari, is this on-scroll demo glitchy there too like it is for me in Epiphany?

https://cdpn.io/pen/debug/JoKqRjZ

If you cannot test in actual Safari, boosts appreciated.

Thank you! 🙏

PS - Yes, I know it doesn't work in Firefox, it's because of this bug some rando filed a couple of years ago... https://bugzilla.mozilla.org/show_bug.cgi?id=1927325

#CSS #cssScrollAnimation #code #coding #web #dev #webDev #webDevelopment #frontend #cssAnimation #cssTransforms