Skip to content
What are you looking for?. Open searchSR
brands and shortcuts

Tags

animation

2 items
SVGSMILa timing chart before the markup
Webweak signal

A timing chart as the blueprint for SMIL animation in SVG

On August 20 at Smashing Magazine, Johan Grobler described a method in which a complex SMIL animation is first drawn as a timing chart and only then written in markup. Every bar on the chart corresponds to one animate element, and its length and position become the values of the dur and begin attributes. Because a single animate changes exactly one property of one element, the count climbs fast: a three-dot loader takes six of them. The piece also covers synchronizing to another animation's start or end through the begin attribute, and honoring prefers-reduced-motion through the picture element.

Smashing Magazineverified

FIREFOX154sibling-index() and text-box-trim
Webmedium signal

Firefox 154 brings sibling-index(), sibling-count(), and text-box-trim

The August 18 release adds three CSS features you can use right away. sibling-index() and sibling-count() give an element's position among its siblings and their total, directly in CSS and without a line of JavaScript, which ends the need to hand-write variables like --i for staggered animation delays. Alongside them come text-box-edge, text-box-trim, and the text-box shorthand, which remove the extra space above and below text so headings finally sit in the grid the way they look in the design. On the JavaScript side, includes(), join(), chunks(), and windows() were added to the iterator prototype.

MDNverified