Motion Highlights #12
Showcasing a global selection of outstanding motion design and animation projects, highlighting talented creators pushing the boundaries of visual storytelling.
By Codrops30 Aug 2025The `-path` of Least Resistance (Part 2)
Delve into offset-path and related properties to create animated movements, leveraging the same powerful functions used with clip-path.
By Frontend Masters30 Aug 2025CSS Elevator: A Pure CSS State Machine With Floor Navigation
Creating a fully functional, interactive elevator with CSS alone – no JavaScript needed – using modern CSS features to manage state and navigation.
By CSS-Tricks29 Aug 2025Prompting Is A Design Act: How To Brief, Guide And Iterate With AI
Rethinking prompting as a design act – blending creative briefs, conversation design, and structural clarity to enhance AI-assisted workflows.
By Lyndon Cerejo29 Aug 2025Gradient Style Is Out Of Beta
Gradient.style is now open source, supporting multiple background layers and ready for community feedback – bringing more flexibility to gradient creation.
By Adam Argyle28 Aug 2025Interactive Video Projection Mapping with Three.js
Exploring how to map video textures onto 3D cubes with masks, motion, and interactivity using Three.js for dynamic, engaging web experiences.
By Codrops28 Aug 2025Partytown: Optimize Third Party Scripts with Web Workers
Explore techniques using web workers and Partytown to reduce third-party resource impact and boost website performance.
By DebugBear28 Aug 2025The `-path` of Least Resistance (Part 1)
An in-depth look at clip-path, highlighting its capabilities for complex shape creation, especially with the new shape() function.
By Frontend Masters27 Aug 2025A Radio Button Shopping Cart Trick
An approach to animating shopping cart additions with an infinite item count, utilizing a clever variation of the Checkbox Hack for seamless effects.
By CSS-Tricks27 Aug 2025Build a router for creative transitions
Tackling route transition animations – sharing solutions and custom approaches to create smooth, versatile transitions across different routing scenarios.
By Willy Brauner27 Aug 2025⚖️ Data-Driven Design's Death, AI-Driven UX & Button Hacks
Examining how AI is transforming UX, signaling a shift in design paradigms, and why some buttons may be confusing users.
By Unicorn Club27 Aug 2025The Making of gradient.style
A journey through building a CSS-compliant gradient generator in 2023, featuring HDR colors, visual effects, and innovative syntax testing for modern gradients.
By Adam Argyle27 Aug 2025Opening a Details Element from the URL
When the URL hash matches an element's ID inside another element, it will automatically open – no extra code needed.
By Frontend Masters27 Aug 2025The interpolate-size property is a great example of progressive enhancement
A look at the current state of animate-to-height: auto and intrinsic size transitions in CSS, emphasizing progressive enhancement and ongoing browser support.
By Piccalilli26 Aug 2025Optimizing PWAs For Different Display Modes
Adapting PWAs for different display modes to prevent usability issues when transitioning from a browser environment to native-like experiences.
By Declan Chidlow26 Aug 2025Very Early Playing with random() in CSS
Safari Technical Preview introduces the experimental CSS `random()` function, opening new creative possibilities for designers.
By Frontend Masters25 Aug 2025
Create an interactive photo gallery that uses WebGL to map images onto a rotating 3D cube. Add functionality for users to click on a face of the cube to view the image in full screen, and incorporate subtle animations to enhance the user experience. Use Three.js for the 3D effects, and experiment with CSS for smooth transitions between states.
Why don't HTML and CSS get along? Because they always need to style their differences!