\\n <img id=\\"apes-rock\\" src=\\"...\\" alt=\\"\\" />\\n</figure>\\n\\n\\n
figure {\\n position: relative; \\n\\n #bumpy-ride { ... }\\n\\n #apes-rock {\\n position: absolute;\\n width: 960px;\\n left: calc(50% - 480px);\\n bottom: 0;\\n }\\n}\\n
\\n\\nLikewise, when the ranger reads his telegram, only his eyes and mouth move:
\\nIf you’ve wondered why both Ranger Smith and Yogi Bear wear collars and neckties, it’s so the line between their animated heads and faces and static bodies is obscured:
\\nSVG delivers incredible performance and also offers fantastic flexibility when animating elements. The ability to embed one SVG inside another and to manipulate groups and other elements using CSS makes it ideal for animations.
\\nI replicated how Hanna-Barbera made Ranger Smith and other characters’ mouths move by first including a group that contains the ranger’s body and head, which remain static throughout. Then, I added six more groups, each containing one frame of his mouth moving:
\\n<svg>\\n <!-- static elements --\x3e\\n <g>...</g>\\n\\n <!-- animation frames --\x3e\\n <g class=\\"frame-1\\">...</g>\\n <g class=\\"frame-2\\">...</g>\\n <g class=\\"frame-3\\">...</g>\\n <g class=\\"frame-4\\">...</g>\\n <g class=\\"frame-5\\">...</g>\\n <g class=\\"frame-6\\">...</g>\\n</svg>\\n
\\n\\nI used CSS custom properties to define the speed at which characters’ mouths move and how many frames are in the animation:
\\n:root {\\n --animation-duration: 1s;\\n --frame-count: 6;\\n}\\n
\\n\\nThen, I applied a keyframe animation to show and hide each frame:
\\n@keyframes ranger-talking {\\n 0% { visibility: visible; }\\n 16.67% { visibility: hidden; }\\n 100% { visibility: hidden; }\\n}\\n\\n[class*=\\"frame\\"] {\\n visibility: hidden;\\n animation: ranger-talking var(--animation-duration) infinite;\\n}\\n
\\n\\nBefore finally setting a delay, which makes each frame visible at the correct time:
\\n.frame-1 {\\n animation-delay: calc(var(--animation-duration) * 0 / var(--frame-count));\\n}\\n\\n/* ... */\\n\\n.frame-6 {\\n animation-delay: calc(var(--animation-duration) * 5 / var(--frame-count));\\n}\\n
\\nIn my design for Mike Worth’s website, animation isn’t just for decoration; it tells a compelling story about him and his work. Every movement reflects his brand identity and makes his website an extension of his creative world.
\\nThink beyond movement the next time you reach for a CSS animation. Consider emotions, identity, and mood, too. After all, a well-considered animation can do more than catch someone’s eye. It can capture their imagination.
\\nMike Worth’s website will launch in June 2025, but you can see examples from this article on CodePen now.
","description":"Browser makers didn’t take long to add the movement capabilities to CSS. The simple :hover pseudo-class came first, and a bit later, the transitions between two states. Then came the ability to change states across a set of @keyframes and, most recently, scroll-driven animations…","guid":"https://smashingmagazine.com/2025/05/smashing-animations-part-1-classic-cartoons-inspire-css/","author":"hello@smashingmagazine.com (Andy Clarke)","authorUrl":null,"authorAvatar":null,"insertedAt":"2025-05-07T17:25:08.556Z","publishedAt":"2025-05-07T08:00:00.540Z","media":[{"url":"http://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/smashing-animations-part-1-classic-cartoons-inspire-css.jpg","type":"photo","width":1200,"height":675,"blurhash":"LBRMSe%hxu_4~p=|xuxaU{EONFRj"},{"url":"https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/3-yogi-bear-show.png","type":"photo","width":1200,"height":675,"blurhash":"LjLx4o0_X7WUoeS1azoM=#$lWBoM"},{"url":"https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/4-andy-clarke-design.png","type":"photo","width":1920,"height":1319,"blurhash":"LCECa#Vr4n.9n3t7D%xt01WEWBM{"},{"url":"https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/5-yogi-bear-show-home-sweet-jellystone.png","type":"photo","width":1200,"height":675,"blurhash":"LSE3^jadFzS}S+oyI@S$Haiyafj["},{"url":"https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/6-yogi-bear-show-author-recreation.png","type":"photo","width":1200,"height":675,"blurhash":"LRF#w1xtxtoM3Af+kCj?%MjHs;j?"},{"url":"https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/7-yogi-bear-dissecting-movement.png","type":"photo","width":5468,"height":547,"blurhash":"LeGuEdtPaejZ2=oyWBR*t8n%WBWC"},{"url":"https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/8-robert-gentle-background-painting.png","type":"photo","width":1361,"height":535,"blurhash":"LLKT}Vx^ys%L]:oypIjF5Rjss,Rj"},{"url":"https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/9-yogi-bear-sequence-shortened.png","type":"photo","width":3050,"height":500,"blurhash":"LhGRO=kAobj[1@WUWVayt7WBWFoL"},{"url":"https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/10-yogi-bear-sequence-shortened.png","type":"photo","width":3050,"height":500,"blurhash":"LLJRs--=xG_3}[bws=s,IoRikDIT"},{"url":"https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/11-mike-worth-website.png","type":"photo","width":1200,"height":600,"blurhash":"LaKxFk.6i_Sh3YNdV[oz~pRQkCt6"},{"url":"https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/12-yogi-bear-background-painting.png","type":"photo","width":1361,"height":547,"blurhash":"LaIqlJjJV[s,3mj]afWUtSxZkBWB"},{"url":"https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/1-yogi-bear-show-reusing-elements.png","type":"photo","width":2301,"height":564,"blurhash":"LWI##x-;EfWEGF$*SLWU{.rrWAfi"},{"url":"https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/2-layered-foreground-elements.png","type":"photo","width":1494,"height":548,"blurhash":"LpKw:}WAD$I9~qV?VssnM{ent7xu"},{"url":"https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/13-layered-foreground-elements.png","type":"photo","width":1200,"height":600,"blurhash":"LgJk_XD+ens,c[xsWBWBXnxtt7S4"},{"url":"https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/14-looping-frames.png","type":"photo","width":2540,"height":500,"blurhash":"L5H^qH,-sD^g~9R-n+RkZ#tkxst5"},{"url":"https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/15-looping-frames-movement.png","type":"photo","width":2207,"height":1104,"blurhash":"L5JG#%${$c5u}:oft7xD-maya{WX"},{"url":"https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/16-yogi-bear.png","type":"photo","width":1200,"height":900,"blurhash":"LaFFKH-pF^W;~B$*S4Sf+xnOniS2"},{"url":"https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/17-yogi-bear.png","type":"photo","width":1200,"height":675,"blurhash":"LTCr$M9u9bxYt6WBafof0g$*$%W="},{"url":"https://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/18-the-end-painting.png","type":"photo","width":1200,"height":675,"blurhash":"LeHwE9-Xxc$,s;ayj[j[}xR%R$R%"}],"categories":null,"attachments":[{"url":"http://files.smashing.media/articles/smashing-animations-part-1-classic-cartoons-inspire-css/smashing-animations-part-1-classic-cartoons-inspire-css.jpg","mime_type":"image/jpg","size_in_bytes":"0"}],"extra":null,"language":null,"feeds":{"type":"feed","id":"42579624844251149","url":"https://www.smashingmagazine.com/feed/","title":"Articles on Smashing Magazine — For Web Designers And Developers","description":"Recent content in Articles on Smashing Magazine — For Web Designers And Developers","siteUrl":"https://www.smashingmagazine.com/","image":"https://www.smashingmagazine.com/images/favicon/app-icon-512x512.png","errorMessage":null,"errorAt":null,"ownerUserId":null}},{"feedId":"41719081557593116","id":"142584410308306944","title":"GSAP is Now Completely Free, Even for Commercial Use!","url":"https://css-tricks.com/gsap-is-now-completely-free-even-for-commercial-use/","content":"Back in October, the folks behind the GreenSock Animation Platform (GSAP) joined forces with Webflow, the visual website builder. Now, the team’s back with another announcement: Along with the version 3.13 release, GSAP, and all its awesome plugins, are now freely available to everyone.
\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\nThanks to Webflow GSAP is now 100% free including all of the bonus plugins like SplitText, MorphSVG, and all the others that were exclusively available to Club GSAP members. That’s right, the entire GSAP toolset is free, even for commercial use! 🤯
\\n
Webflow is celebrating over on their blog as well:
\\n\\n\\n\\n\\n\\n\\n\\n\\nWith Webflow’s support, the GSAP team can continue to lead the charge in product and industry innovation while allowing even more developers the opportunity to harness the full breadth of GSAP-powered motion.
\\n
Check out the GSAP blog to read more about the announcement, then go animate something awesome and share it with us!
\\nGSAP is Now Completely Free, Even for Commercial Use! originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
","description":"Back in October, the folks behind the GreenSock Animation Platform (GSAP) joined forces with Webflow, the visual website builder. Now, the team’s back with another announcement: Along with the version 3.13 release, GSAP, and all its awesome plugins, are now freely available to…","guid":"https://css-tricks.com/?p=386482","author":"Ryan Trimble","authorUrl":null,"authorAvatar":null,"insertedAt":"2025-05-06T14:23:07.018Z","publishedAt":"2025-05-06T14:14:41.794Z","media":null,"categories":["Links","animation","resource"],"attachments":null,"extra":null,"language":null,"feeds":{"type":"feed","id":"41719081557593116","url":"https://css-tricks.com/feed/","title":"CSS-Tricks","description":"Tips, Tricks, and Techniques on using Cascading Style Sheets.","siteUrl":"https://css-tricks.com/","image":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=32%2C32&ssl=1","errorMessage":null,"errorAt":null,"ownerUserId":null}},{"feedId":"42579624844251149","id":"142591958885108736","title":"Masonry In CSS: Should Grid Evolve Or Stand Aside For A New Module?","url":"https://smashingmagazine.com/2025/05/masonry-css-should-grid-evolve-stand-aside-new-module/","content":"You’ve got a Pinterest-style layout to build, but you’re tired of JavaScript. Could CSS finally have the answer? Well, for a beginner, taking a look at the pins on your Pinterest page, you might be convinced that the CSS grid layout is enough, but not until you begin to build do you realise display: grid
with additional tweaks is less than enough. In fact, Pinterest built its layout with JavaScript, but how cool would it be if it were just CSS? If there were a CSS display property that gave such a layout without any additional JavaScript, how awesome would that be?
Maybe there is. The CSS grid layout has an experimental masonry value for grid-template-rows
. The masonry layout is an irregular, flowing grid. Irregular in the sense that, instead of following a rigid grid pattern with spaces left after shorter pieces, the items in the next row of a masonry layout rise to fill the spaces on the masonry axis. It’s the dream for portfolios, image galleries, and social feeds — designs that thrive on organic flow. But here’s the catch: while this experimental feature exists (think Firefox Nightly with a flag enabled), it’s not the seamless solution you might expect, thanks to limited browser support and some rough edges in its current form.
Maybe there isn’t. CSS lacks native masonry support, forcing developers to use hacks or JavaScript libraries like Masonry.js. Developers with a good design background have expressed their criticism about the CSS grid form of masonry, with Rachel highlighting that masonry’s organic flow contrasts with Grid’s strict two-dimensional structure, potentially confusing developers expecting Grid-like behaviour or Ahmad Shadeed fussing about how it makes the grid layout more complex than it should be, potentially overwhelming developers who value Grid’s clarity for structured layouts. Geoff also echoes Rachel Andrew’s concern that “teaching and learning grid to get to understand masonry behaviour unnecessarily lumps two different formatting contexts into one,” complicating education for designers and developers who rely on clear mental models.
\\nPerhaps there might be hope. The Apple WebKit team just sprung up a new contender, which claims not only to merge the pros of grid and masonry into a unified system shorthand but also includes flexbox concepts. Imagine the best of three CSS layout systems in one.
\\nGiven these complaints and criticisms — and a new guy in the game — the question is:
\\nShould CSS Grid expand to handle Masonry, or should a new, dedicated module take over, or should item-flow
just take the reins?
\\n\\n\\n\\nThe State Of Masonry In CSS Today\\nSeveral developers have attempted to create workarounds to achieve a masonry layout in their web applications using CSS Grid with manual row-span hacks, CSS Columns, and JavaScript libraries. Without native masonry, developers often turn to Grid hacks like this: a grid-auto-rows
trick paired with JavaScript to fake the flow. It works — sort of — but the cracks show fast.
For instance, the example below relies on JavaScript to measure each item’s height after rendering, calculate the number of 10px rows (plus gaps) the item should span while setting grid-row-end
dynamically, and use event listeners to adjust the layout upon page load and window resize.
/* HTML */\\n<div class=\\"masonry-grid\\">\\n <div class=\\"masonry-item\\"><img src=\\"image1.jpg\\" alt=\\"Image 1\\"></div>\\n <div class=\\"masonry-item\\"><p>Short text content here.</p></div>\\n <div class=\\"masonry-item\\"><img src=\\"image2.jpg\\" alt=\\"Image 2\\"></div>\\n <div class=\\"masonry-item\\"><p>Longer text content that spans multiple lines to show height variation.</p></div>\\n</div>\\n
\\n/* CSS */\\n.masonry-grid {\\n display: grid;\\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive columns */\\n grid-auto-rows: 10px; /* Small row height for precise spanning */\\n grid-auto-flow: column; /* Fills columns left-to-right */\\n gap: 10px; /* Spacing between items */\\n}\\n\\n.masonry-item {\\n /* Ensure content doesn’t overflow */\\n overflow: hidden;\\n}\\n\\n.masonry-item img {\\n width: 100%;\\n height: auto;\\n display: block;\\n}\\n\\n.masonry-item p {\\n margin: 0;\\n padding: 10px;\\n}\\n
\\n// JavaScript\\n\\nfunction applyMasonry() {\\n const grid = document.querySelector(\'.masonry-grid\');\\n const items = grid.querySelectorAll(\'.masonry-item\');\\n\\n items.forEach(item => {\\n // Reset any previous spans\\n item.style.gridRowEnd = \'auto\';\\n\\n // Calculate the number of rows to span based on item height\\n const rowHeight = 10; \\n const gap = 10; \\n const itemHeight = item.getBoundingClientRect().height;\\n const rowSpan = Math.ceil((itemHeight + gap) / (rowHeight + gap));\\n\\n // Apply the span\\n item.style.gridRowEnd = span ${rowSpan}
;\\n });\\n}\\n\\n// Run on load and resize\\nwindow.addEventListener(\'load\', applyMasonry);\\nwindow.addEventListener(\'resize\', applyMasonry);\\n
\\nThis Grid hack gets us close to a masonry layout — items stack, gaps fill, and it looks decent enough. But let’s be real: it’s not there yet. The code sample above, unlike native grid-template-rows: masonry
(which is experimental and only exists on Firefox Nightly), relies on JavaScript to calculate spans, defeating the “no JavaScript” dream. The JavaScript logic works by recalculating spans on resize or content change. As Chris Coyier noted in his critique of similar hacks, this can lead to lag on complex pages.
Also, the logical DOM order might not match the visual flow, a concern Rachel Andrew raised about masonry layouts generally. Finally, if images load slowly or content shifts (e.g., lazy-loaded media), the spans need recalculation, risking layout jumps. It’s not really the ideal hack; I’m sure you’d agree.
\\nDevelopers need a smooth experience, and ergonomically speaking, hacking Grid with scripts is a mental juggling act. It forces you to switch between CSS and JavaScript to tweak a layout. A native solution, whether Grid-powered or a new module, has to nail effortless responsiveness, neat rendering, and a workflow that does not make you break your tools.
\\nThat’s why this debate matters — our daily grind demands it.
\\nOption 1: Extending CSS Grid For Masonry\\nOne way forward is to strengthen the CSS Grid with masonry powers. As of this writing, CSS grids have been extended to accommodate masonry. grid-template-rows: masonry
is a draft of CSS Grid Level 3 that is currently experimental in Firefox Nightly. The columns of this layout will remain as a grid axis while the row takes on masonry. The child elements are then laid out item by item along the rows, as with the grid layout’s automatic placement. With this layout, items flow vertically, respecting column tracks but not row constraints.
This option leaves Grid as your go-to layout system but allows it to handle the flowing, gap-filling stacks we crave.
\\n.masonry-grid {\\n display: grid;\\n gap: 10px;\\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\\n grid-template-rows: masonry;\\n}\\n
\\nFirst off, the grid-masonry style builds on CSS Grid’s familiarity and robust tooling (e.g., DevTools support). As a front-end developer, there’s a chance you’ve played with grid-template-columns
or grid-area
, so you’re halfway up the learning matrix. Masonry only extends the existing capabilities, eliminating the need to learn a whole new syntax from scratch. Also, Grid’s robust tooling comes along with Chrome DevTools’ grid overlay or Firefox’s layout inspector, removing the need for JavaScript hacks.
Not so fast: there are limitations. Grid’s specifications already include properties like align-content
and grid-auto-flow
. Stacking masonry on the list risks turning it into a labyrinth.
Then there are the edge cases. What happens when you want an item to span multiple columns and flow masonry-style? Or when gaps between items don’t align across columns? The specs are still foggy here, and early tests hint at bugs like items jumping unpredictably if content loads dynamically. This issue could break layouts, especially on responsive designs. The browser compatibility issue also exists. It’s still experimental, and even with polyfills, it does not work on other browsers except Firefox Nightly. Not something you’d want to try in your next client’s project, right?
\\nOption 2: A Standalone Masonry Module\\nWhat if we had a display: masonry
approach instead? Indulge me for a few minutes. This isn’t just wishful thinking. Early CSS Working Group chats have floated the idea, and it’s worth picturing how it could improve layouts. Let’s dive into the vision, how it might work, and what it gains or loses in the process.
Imagine a layout system that doesn’t lean on Grid’s rigid tracks or Flexbox’s linear flow but instead thrives on vertical stacking with a horizontal twist. The goal? A clean slate for masonry’s signature look: items cascading down columns, filling gaps naturally, no hacks required. Inspired by murmurs in CSSWG discussions and the Chrome team’s alternative proposal, this module would prioritise fluidity over structure, giving designers a tool that feels as intuitive as the layouts they’re chasing. Think Pinterest but without JavaScript scaffolding.
\\nHere’s the pitch: a display
value named masonry
kicks off a flow-based system where items stack vertically by default, adjusting horizontally to fit the container. You’d control the direction and spacing with simple properties like the following:
.masonry {\\n display: masonry;\\n masonry-direction: column;\\n gap: 1rem;\\n}\\n
\\n\\nWant more control? Hypothetical extras like masonry-columns: auto
could mimic Grid’s repeat(auto-fill, minmax())
, while masonry-align: balance
might even out column lengths for a polished look. It’s less about precise placement (Grid’s strength) and more about letting content breathe and flow, adapting to whatever screen size is thrown at it. The big win here is a clean break from Grid’s rigid order. A standalone module keeps them distinct: Grid for order, Masonry for flow. No more wrestling with Grid properties that don’t quite fit; you get a system tailored to the job.
Of course, it’s not all smooth sailing. A brand-new spec means starting from zero. Browser vendors would need to rally behind it, which can be slow. Also, it might lead to confusion of choice, with developers asking questions like: “Do I use Grid or Masonry for this gallery?” But hear me out: This proposed module might muddy the waters before it clears them, but after the water is clear, it’s safe for use by all and sundry.
\\nItem Flow: A Unified Layout Resolution\\nIn March 2025, Apple’s WebKit team proposed Item Flow, a new system that unifies concepts from Flexbox, Grid, and masonry into a single set of properties. Rather than choosing between enhancing Grid or creating a new masonry module, Item Flow merges their strengths, replacing flex-flow
and grid-auto-flow
with a shorthand called item-flow
. This system introduces four longhand properties:
item-direction
row
, column
, row-reverse
).item-wrap
wrap
, nowrap
, wrap-reverse
).item-pack
sparse
, dense
, balance
).item-slack
Item Flow aims to make masonry a natural outcome of these properties, not a separate feature. For example, a masonry layout could be achieved with:
\\n.container {\\n display: grid; /* or flex */\\n item-flow: column wrap dense;\\n\\n /* long hand version */\\n item-direction: column;\\n item-wrap: wrap;\\n item-pack: dense;\\n\\n gap: 1rem;\\n}\\n
\\n\\nThis setup allows items to flow vertically, wrap into columns, and pack tightly, mimicking masonry’s organic arrangement. The dense packing option, inspired by Grid’s auto-flow: dense
, reorders items to minimise gaps, while item-slack
could fine-tune spacing for visual balance.
Item Flow’s promise lies in its wide use case. It enhances Grid and Flexbox with features like nowrap
for Grid or balance
packing for Flexbox, addressing long-standing developer wishlists. However, the proposal is still in discussion, and properties like item-slack
face naming debates due to clarity issues for non-native English speakers.
The downside? Item Flow is a future-facing concept, and it has not yet been implemented in browsers as of April 2025. Developers must wait for standardisation and adoption, and the CSS Working Group is still gathering feedback.
\\nWhat’s The Right Path?\\nWhile there is no direct answer to that question, the masonry debate hinges on balancing simplicity, performance, and flexibility. Extending the Grid with masonry is tempting but risks overcomplicating an already robust system. A standalone display: masonry
module offers clarity but adds to CSS’s learning curve. Item Flow, the newest contender, proposes a unified system that could make masonry a natural extension of Grid and Flexbox, potentially putting the debate to rest at last.
Each approach has trade-offs:
\\nItem Flow’s ability to enhance existing layouts while supporting masonry makes it a compelling option, but its success depends on browser adoption and community support.
\\nConclusion\\nSo, where do we land after all this? The masonry showdown boils down to three paths: the extension of masonry into CSS Grid, a standalone module for masonry, or Item Flow. Now, the question is, will CSS finally free us from JavaScript for masonry, or are we still dreaming?
\\nGrid’s teasing us with a taste, and a standalone module’s whispering promises — but the finish line’s unclear, and WebKit swoops in with a killer merge shorthand, Item Flow. Browser buy-in, community push, and a few more spec revisions might tell us. For now, it’s your move — test, tweak, and weigh in. The answer’s coming, one layout at a time.
\\n