Mastodawn

#Development #Overviews
The great CSS expansion · How modern CSS reduces the need for JavaScript https://ilo.im/16bpqd

_____
#ModernCSS #Libraries #MotionJS #GSAP #React #WebPerf #WebDev #Frontend #CSS #JavaScript

The Great CSS Expansion

CSS now does what Floating UI, GSAP ScrollTrigger, Framer Motion, and react-select used to require JavaScript for. Here is exactly how much that saves, why these libraries were painful beyond their size, and what the platform still hasn't figured out.

Butler's Log

pablolarah 3d ago

💎 SVG Mask Transitions on Scroll with GSAP and ScrollTrigger
by Hiroki Watanabe
at @codrops
In this tutorial, we’ll create four scroll-driven transitions that reveal fullscreen images using SVG masks, GSAP, & grid- and blind-based patterns.
#GSAP #webdev

https://tympanus.net/codrops/2026/03/11/svg-mask-transitions-on-scroll-with-gsap-and-scrolltrigger/

kolonatalie 6d ago

Interactive 3D Liquid Glass Experience exploring glassmorphism and real-time physics.

• Three.js & WebGL
• Rapier WASM Physics
• Dynamic Marching Cubes
• GSAP
• Optimized with adaptive resolution.

Live: https://liquid-glass-experience.vercel.app

#Threejs #CreativeCoding #WebGL #Typescript #GSAP

FreeFrontend Mar 21

GSAP ScrollTrigger List Expansion
Scroll reveals structure.
[HTML + CSS]
ScrollTrigger expands the list dynamically. Hardware-accelerated math. Zero layout shifts.
Source: https://freefrontend.com/code/gsap-scrolltrigger-list-expansion-2026-03-20/
#GSAP #UI #CSS

kolonatalie Mar 16

People say "animations should only solve problems."

My magnetic button solves zero problems. It just looks cool and proves I can code complex effects without killing your CPU.

I’m just here for the smooth hover effects, honestly. ✨

#CreativeDev #GSAP #frontend

Frontend Dogma Mar 12

Sticky Grid Scroll: Building a Scroll-Driven Animated Grid, by @theoplawinski.com (@codrops):

https://tympanus.net/codrops/2026/03/02/sticky-grid-scroll-building-a-scroll-driven-animated-grid/?_bhlid=8425eb318a74bb38eff9c01ff5ae8002f772b97e

#tutorials #css #grids #layout #scrolling #gsap

Sticky Grid Scroll: Building a Scroll-Driven Animated Grid | Codrops

Learn how to build a structured scroll-driven image grid where movement unfolds progressively within a sticky layout.

Codrops

ThemePure Mar 2

Pixora – Creative Agency & Portfolio HTML Template

Your website should do more than show work — it should create an experience.

With 19+ Home Pages, powerful GSAP & Three.js animations, interactive ripple effects, and a fully responsive layout, Pixora helps you build a bold and modern online presence.

⚡ 59+ HTML5 Pages
🧩 100+ Creative Sections
🌍 RTL Ready
🔧 Built with Bootstrap 5

🔗 Get it now: https://themeforest.net/item/pixora-creative-agency-portfolio-html-template/60453505?utm_source=chatgpt.com

#Pixora #PortfolioWebsite #Bootstrap5 #GSAP #ThreeJS

MapTheClouds Feb 25

Day 17/100: Every map lies about scale 📏

Technical experiment exploring how maps communicate distance: scale bars, ratios, representative fractions, verbal scales.

Used #WebGL shaders + #GSAP for smooth transitions between images at different scales.

Cartographers have wrestled with this for centuries: curved world → flat surface → readable size. Every map compromises. Good design makes compromises transparent.
When scale indicators work, readers trust the map. 🗺️

#100DayMapChallenge #GIS