Codrops·33w7 Must-Know GSAP Animation Tips for Creative Developers
Seven practical GSAP animation techniques including SplitText masking for efficient DOM manipulation, stagger direction control for varied animation flows, array value wrapping for creative effects, random string functions for dynamic animations, repeatRefresh for varying repeated animations, timeScale tweening for smooth playback control, and GSDevTools markers for debugging complex sequences.
Codrops·31wThe Journey Behind inspo.page: A Better Way to Collect Web Design Inspiration
A designer shares the story behind creating inspo.page, a curated platform for discovering specific web design elements like animations, micro-interactions, and component-level inspiration. The platform uses three filter systems (What, Where, Motion) to help designers find precise design elements rather than just full websites. Built with Astro and Sanity, it features an automated curation system and focuses on the human touch details that AI can't replicate in web design.
Codrops·31wCreating an Immersive 3D Weather Visualization with React Three Fiber
A comprehensive guide to building an interactive 3D weather visualization using React Three Fiber and real weather API data. Covers creating realistic weather effects like rain, snow, and storms using instanced rendering for performance, implementing dynamic day/night cycles with atmospheric lighting, building forecast portals with MeshPortalMaterial, and optimizing particle systems for smooth 60fps rendering. Includes practical techniques for API integration, caching strategies, and conditional component rendering based on weather conditions.
Codrops·30wMotion Highlights #13
A curated collection of 21 motion design and animation examples from various creators, featuring typography animations, UI transitions, WebGL experiments, and interactive elements. Includes work from platforms like Instagram, LinkedIn, and Twitter, showcasing techniques ranging from simple smooth transitions to complex WebGL implementations with Three.js and GSAP.