Olá, frontend friends! 👋
Hope you are having a glorious week so far!
Exciting news: Framer Motion (now simply Motion) is breaking free from its React-only roots, now evolving into a versatile, open-source tool with support for vanilla JavaScript and beyond. It’s fantastic to see such a well-loved library grow with the community’s backing!
Another highlight this week: Daniel Beauchamp’s single draw call firework effect in Three.js is a mind-blowing technique for creating realistic fireworks with minimal resources, definitely worth checking out!
Standout Web Design Picks
Want more inspiration? Browse the latest additions to our Webzibition 👉
Penpot, the free Open-Source design tool for design & code collaboration, has just launched its new Plugin System! To celebrate, enter the Penpot Plugins Contest, running from Nov 15 to Dec 15. Create and showcase your plugins for a chance to win one of the more than 20 cash prizes available. Whether you’re a pro developer or a rookie at plugin building, we invite everyone to participate, contribute to the Penpot community and share their innovations. Imagine, build, and win!
Course Discount
Learn to build immersive, scrollable 3D web pages with industry expert Anderson Mancini in this fresh, hands-on course. Perfect for those with React and Three.js experience, Anderson guides you step-by-step through design, custom effects, and seamless GSAP ScrollTrigger animations to bring your projects to life.
Valid until November 29, 2024
Framer Motion is now an independent project, rebranded as “Motion,” expanding from a React-only library to a versatile, open-source animation solution with support for vanilla JavaScript and other frameworks, driven by community demand and new sponsorship support.
Daniel Beauchamp shares his technique for creating a realistic firework effect in 3D using Three.js with just a single draw call.
This article by Ahmad Shadeed explains how the CSS property overflow: clip works, highlighting its advantages over overflow: hidden, and provides practical use cases for clipping content in specific directions, controlling overflow margins, and enhancing design elements without unwanted scroll behavior.
This article is a comprehensive guide to usability testing, covering why it’s essential, how to plan and conduct tests, different testing methods (in-person, remote, and unmoderated), and how to report findings, aimed at helping UX professionals improve user experience and make informed design decisions.
This article by Paul Kinlan questions whether AI tools like Replit could make traditional frameworks and structured code patterns obsolete in the future of software development.
Joel Gustafson describes his project that visualizes the social connections of over 13 million BlueSky users using a detailed, interactive graph, created with data from BlueSky’s WebSocket relay service.
This article takes a nostalgic look at the “Send to YouTube” feature on early iPhones, which allowed users to upload videos directly from the Photos app with just a couple of taps. From 2009 to 2012, this feature led to millions of videos being uploaded with default, barely-searchable titles like “IMG_XXXX,” creating an unexpected archive of unpolished, everyday moments.
Max Barvian made a Vue component version for NumberFlow, designed to transition, format, and localize numbers with smooth animations and customization options.
Palm UI, formerly Framersections, offers over 400 free, beautifully designed website sections for Framer and Figma, with a new version that’s bigger and better, already trusted by 1k+ designers and developers.
A CSS-focused project that recreates the effect of sunlight streaming through a window using progressive blurs, subtle animations, and custom transforms for a realistic light and shadow experience.
(From our blog) Explore the world of shaders with this easy-to-follow guide to creating a custom ASCII art animation using WebGL, Perlin noise, and GLSL.
(From our blog) Learn how to bring the Mac Mini animation to life using Rive’s powerful no-code tools, with tips on nested artboards, state machines, and faux 3D effects.
Instantly add file uploads to your app with Pinata’s API
Pinata’s File API lets developers integrate file uploads and retrieval in just minutes. No complex setup, no configuration headaches—just fast and scalable file management.
Video Vault
Animation Spotlight
Demo Corner
❓Did you know that…
…the first touchscreens were invented for air traffic control and physics labs? Back in the 1970s, engineers at CERN developed transparent touchscreens for particle accelerators, and early versions even helped air traffic controllers interact directly with data on their screens. Today’s touchscreens in smartphones and tablets owe a lot to these pioneering applications in science and aviation!
Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future.