A rather geeky/technical weblog, est. 2001, by Bramus
So, you’ve found a custom easing function defined in JavaScript. Great! But how do you use that with the Web Animations API (WAAPI)? Turns out that’s more difficult than you’d first expect it to be.
@scroll-timeline (Part 4)
🚨 UPDATE: The Scroll-Linked Animations Specification and its proposed syntax have undergone a major rewrite. This post details an older version of the syntax and has not been updated to reflect these changes. Do note that the concept of a Scroll-Linked Animation still stands, it’s only the syntax that has changed since writing this. Please …
Continue reading “The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 4)“
A new animation library, built on the Web Animations API for the smallest filesize and the fastest performance. import { animate } from “motion” const boxes = document.querySelectorAll(".box"); animate(boxes, { backgroundColor: "red" }); Motion One → Be sure to also read the “Improvements over WAAPI” page.
Talk by Ben Deitmer, as recorded at the latest Front-end Forward Meetup: Traditionally most web animations are driven purely by javascript. The now widely supported Web Animations Api has potential to drastically decrease the javascript footprint and improve performance out of the box. Ben learns you how to implement this new api but also have …
Continue reading “The new native web: Bye bye animation libraries?”