The Collective #906: Anime.js v4, WebGL Scroll Sync, Vector-based Feathering System

Your weekly digest of dev & design links

Author

Codrops Publication
April 07, 2025

Olá, frontend friends! 👋

Here’s a fresh roundup of the latest frontend news, links, and resources to inspire and inform you. Whether you're looking for new ideas or just something interesting, we hope you'll discover something exciting in this edition!

Happy exploring! 💙

P.S. We've been hosting Codrops with Liquid Web for almost a decade now—super reliable and solid support. Highly recommended.

From our sponsor

Start learning AI in 2025

Keeping up with AI is hard – we get it!

That’s why over 1M professionals read Superhuman AI to stay ahead.

  • Get daily AI news, tools, and tutorials

  • Learn new AI skills you can use at work in 3 mins a day

  • Become 10X more productive

GSAP's Site of the Week, Nite Riot, was flawlessly executed with ScrollTrigger, ScrollSmoother, Observer, and Flip — all built in Webflow.

web-trends

A deep dive into recreating Apple’s iconic Cover Flow UI using modern CSS features—scroll snap and scroll-driven animations—with no JavaScript.

article / css

📝 Tweaking Text Level Styles, Reprised

An updated, opinionated guide to styling <mark>, <del>, <ins>, and <s> elements for modern browsers and screen readers.

article / css

Lusion’s WebGL-Scroll-Sync demo explores a workaround for syncing WebGL visuals with DOM elements using a single canvas—without resorting to scroll-jacking.

webgl

⚙️ Bare

A lightweight, embeddable JS runtime for cross-device apps, with native threads, CJS/ESM, and no stdlib—built for modularity.

javascript / tool

Mats Erdkamp dives deep into solving anchor link scroll issues with increasingly advanced methods, ending in a smoothstep-based optimized approach.

article / css

After helping creators earn $1B+, the platform has opened its entire codebase, enabling faster features, bug fixes, and self-hosted marketplaces.

gumroad / marketplace / open-source

Stanko shows how to build a CSS-only glitch effect by slicing images into animated strips with hue shifts, random transforms, and no runtime JS.

css / tutorial

Create a personal website in seconds from your resume or LinkedIn — free, open source, and built with Together.ai, Next.js, and more.

ai / next-js / portfolio / software-engineering

From our sponsor

Learn AI in 5 minutes a day

What’s the secret to staying ahead of the curve in the world of AI? Information. Luckily, you can join 1,000,000+ early adopters reading The Rundown AI — the free newsletter that makes you smarter on AI with just a 5-minute read per day.

Ahmad Shadeed explores the new modern attr() in CSS, which allows typed attribute values like colors, lengths, and times for dynamic styling.

css / tutorial

Anime.js v4 is out with a new modular API, scroll-linked animations, draggables, additive effects, WAAPI support, and major performance improvements.

animation / javascript / library

A minimal, CSS-only technique for rendering blurry image placeholders using a single custom property and packed integer encoding.

css / tutorial

Bryan Braun breaks down how circular dependencies in JavaScript work, why errors can be cryptic, and how live bindings sometimes mask the problem.

javascript / tutorial

Christian Alder experiments with CSS holographic mask effects, inspired by Robb Owen’s guide on blend modes and shader-like visuals using only CSS.

css

Chris Dalton shares how Rive built the first true vector-based feathering system — no rasterization, no blur hacks, just clean math and modern GPU rendering.Vector Feathering

animation / article / gpu / math / rive

Luciano Nooijen removed AI code tools after noticing a decline in coding instincts, choosing to stay sharp by using AI only manually and intentionally.

ai / opinion

Kyle Gill compares dev server performance across Next.js with Webpack, Turbopack, and Vite (with Rollup and Rolldown), finding Vite fastest in most cases.

article / next-js / performance / turbopack / vite

🧩 Writing my first Astro Integration for Algolia indexing

Thomas Ledoux shares how he built an Astro integration that automatically indexes site content to Algolia during production builds, using TypeScript, Cheerio, and stopword filtering.

algolia / astro / tutorial / typescript

Tim Severien analyzed 595 job listings to assess front-end and full-stack tech demand, finding React, Tailwind, and AWS dominant—though accessibility remains overlooked.

article / jobmarket / software-engineering

Got something you’d like to share? Just reply to this email and let us know!

Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future.