Newsletter #31 - Animated Credit Cards, New Animation Libraries, & Accent Color!

September 24, 2021

Gorgeous GSAP & SVG animations, a new CSS scroll API, two new animation libraries, the accent-color property, and more!


CodePens

Animated Credit Cards

Our friend Tom Miller brought some brilliant animations to some fun debit card designs.

This little GIF doesn't do them justice, and there's 4 in total, so click through to the CodePens to see the smooth animations in all their glory.

Tom's using SVG elements and animating them with GSAP. The magic here is in the stellar motion design.

Pure CSS Scroll-Timeline Demo

This demo from Bramus shows off the upcoming Scroll-Linked Animations API coming to CSS. The full screen carousel uses zero JS. All the magic comes from the @scroll-timeline and animation-timeline properties in the CSS.

Right now it only works if you're using Chrome and turn on "Experimental Web Platform features" in your 'chrome://flags' section.

Read Bramus's explanation thread on Twitter

Check it out on CodePen

New Animation Libraries

This week brought two new animation libraries to the web, each serving a slightly different purpose.

Theatre.js - JavaScript Motion Design Library Theatre.js - JavaScript Motion Design Librarywww.theatrejs.com

Theatre has visual timeline editing tools that you normally see in CG apps like After Effects. The great thing is it's for the web and can animate the DOM, Three.js, WebGL, and really any JS variable.

Motion One: The Web Animations API for everyone Motion One: The Web Animations API for everyonemotion.dev

Motion One is a tiny abstraction over the Web Animations API, made by the author of Framer Motion, Pose, and Popmotion. It handles keyframes, timelines, and staggers, clocking in at only 3.1kb.

People are already making some incredible stuff with Theatre. I'm hoping to learn about both libraries during future streams, so stay tuned for that!

Articles

Accent Color

Why should you care about the new accent-color CSS property? One reason is that it allows you to use the built-in form elements (checkboxes, range sliders, etc) with your own custom colors.

Normally you'd hide the checkbox and reimplement your own with a bunch of CSS. Now to get a great looking set of form elements all you need is:

:root { accent-color: rebeccapurple; }

And your form is now on brand.

Demo playground from Michelle Barker

Our friend Michelle Barker wrote all about it in a Smashing Magazine article, in the best explanation I've seen of it so far. Definitely check it out!

Past Episodes

I want to highlight two recent episodes that will seriously improve your understanding of Design Systems and Typography.

Let's Make a Design System w/ Mike Aparicio Let's Make a Design System w/ Mike Apariciowww.youtube.com

Mike Aparicio teaches us about Design Systems, what a Design Systems Engineer does, and how to make a design system for a website of any size!

Mike went through the Frontend Horse homepage and simplified it, organized it, and showed the power of design systems.

Learning Responsive Typography with Scott Kellum of Typetura Learning Responsive Typography with Scott Kellum of Typeturawww.youtube.com

Scott Kellum taught us an incredible way to create responsive typography with Typetura!

Scott designed a site with beautiful responsive typography and showed us how Typetura makes it simple to build. If you haven't used Typetura yet, you've got to check this one out.

Upcoming Shows

This week is PACKED with great shows, so make sure you're following on Twitch.

Creating Private Content with Auth0, Next.js, and Prismic!

James Q. Quick | Tuesday, September 28th

Incredible Effects with Three.js

Luis Bizarro | Wednesday, September 29th

Learning the CUBE CSS method

Andy Bell | Thursday, September 30th

GSAP Community Questions

Cassie Evans | Friday, October 1st

View all upcoming shows

So Long, Partner

Want a place where you can ask questions, help others, and learn about the fun parts of frontend?

You'll love our Discord.

(Enter with a pun for bonus points).

Hope to see you there, or at one of the shows this week. If not, I'll see you next time we saddle up for the newsletter. Take care.

Your neigh-bor,

Alex

Buy Me a Coffee at ko-fi.com

Fill your mailbox with frontend fun

A weekly newsletter that demystifies the best CodePens, tutorials, and resources. It's always fun, free, and you can hang up your spurs any time.

By subscribing, you agree with Revue’s Terms of Service and Privacy Policy.
Check out past issues
A mailbox stuffed with letters