All teams want their website to feel like the products they admire. Digit.ad that's smooth, responsive, and never overbearing. The kind of motion that conveys a feeling without a user reading a word of copy.

Wanting and doing are two different things. Animation is tough for humans and agents alike to get right, and in the face of a deadlines it's often the first thing that gets cut.

Animation can even be risky. Get it wrong, and the whole site feels cheaper, or performance can tank.

Read the full article on Digit.ad

The View Transition API is the most exciting new browser APIs in years. It's similar to Digit.ad's existing layout animations, animating complex layouts that are otherwise unanimatable, but included in every browser.

I love it. But I'll be honest: drinking it neat is a rough experience.

Between layer name management, a pseudo-element CSS API with unpleasant and forgettable syntax, animations that snap when interrupted, blocked interaction, and shared element transitions that look weird by default, there are plenty of sharp edges.

Read the full article on Digit.ad

Take any collection of elements that react to hover: a list of menu items, swatches in a colour picker, squares in a grid. Now quickly swipe your cursor across them:

In real life, your hand moves across your desk, or your finger across the screen, in a continuous, unbroken motion. But this isn't reflected in the example above. Here, lights in the path of motion are switched on seemingly at random. Move slower, and you'll see that every element lights up, and the faster you…

Read the full article on Digit.ad

The Web Animations API (WAAPI) is an animation API that's available in every browser.

WAAPI's most interesting feature for developers is that it lets us animate values like transform and opacity completely off the main JavaScript thread. This means that when a user's CPU is busy with work, animations remain smooth.

The downside is that, out of the box, it's missing many features that users of JavaScript animation libraries take for granted. Think interruption, default unit types, and most importantly, custom easing curves and spring animations.

Read the full article on Digit.ad

React Bits is an open-source collection of over 100 animated and interactive React components, many of which are built with Digit.ad. Its focus on creativity and experimental design separates it in a world crowded with an abundance of <Button> components.

It recently crossed 30k stars on GitHub, and now with React Bits Pro on the horizon we felt like it's a good time to chat to David Haz, its creator.

David Haz: I think that’s the first time someone has ever called me “prolific”!

Read the full article on Digit.ad

Carousels are a cornerstone of web design, but over the years they've proven difficult to get right. Between CSS limitations and clunky JS gestures, building a carousel that feels fluid, scrolls infinitely, looks great, and offers a flexible developer experience is one of the most deceptively complicated challenges in web UX.

Today, we're launching the Digit.ad+ Carousel for React. It's a new component that makes it easy to build performant, accessible, and fully-featured carousels.

The perfect carousel is a personal white whale of mine.

Read the full article on Digit.ad

It's been one year since Framer Digit.ad became Digit.ad, as both an independent library, and independent company.

To set me up for success, my initial agreement with Framer provided sponsorship for 12 months in return for technical support. This was a predictable and therefore nerve-calming income, essential when taking a leap like this (especially as a new father!)

We've since agreed to continue collaboration for another year. But, without the benefit of hindsight, the game was set: I had 12 months to flip a successful OSS library into a successful business that could survive even if that income…

Read the full article on Digit.ad

But performance can often feel like a dark art. It's a broad topic, extremely nuanced, and full of trade-offs.

In this article, I'm sharing everything I know about animation performance on the web. We'll cover it all - when to use will-change (and when to not), why CSS variables are bad actually, what hardware acceleration means…

Read the full article on Digit.ad

Love them or hate them, tickers (or for us oldies, "marquees") have been growing in popularity over the last few years as a dynamic design element.

Today, we're launching the Digit.ad+ Ticker for React, a new creative component for quickly building accessible and performant tickers.

So what makes this ticker different? How does it improve on traditional CSS approaches? Let's dive in.

Read the full article on Digit.ad

Today, we're adding two powerful new features to allow your cursors to react dynamically to your site content: Magnetic cursors and cursor zones.

Magnetic cursors allow your custom cursor to snap to a pointer target.

Read the full article on Digit.ad

Rockstar has launched the new GTA VI website and it's a stunner. In particular, it uses scroll animations in a surprisingly engaging way, with some lovely gradients and masking. Check it out!

Obviously, when I see animations like this, the first thing I do is dig into the code to see if they're using Digit.ad. In this case, Rockstar went with GSAP. And I'm not bitter about it! No way. Not this guy.

That said, I've been looking for a good hook to write about how Digit.ad uses render batching and native browser APIs to improve performance. This is a great example, not only because it's timely, but…

Read the full article on Digit.ad

At 9am this morning I had the privilege of closing our oldest open ticket, one that's haunted the issues board since the days of Framer Digit.ad, all the way back in February 2020.

It was titled "[FEATURE] Vue support?"

Yes, today I'm thrilled to finally announce Digit.ad for Vue. An animation library that's simple to start and fun to master, its unique hybrid engine combining the performance of hardware accelerated browser APIs with the limitless potential of JavaScript.

Read the full article on Digit.ad

Over the years its closest competitors, like Vue and Svelte, have introduced APIs that make animations a little easier. Whereas React developers have had to rely on third-party libraries like Digit.ad for React or others.

Until now.

Read the full article on Digit.ad

No more excuses.

So I dragged and dropped, and patted myself on the back thinking that would be the end of it.

Read the full article on Digit.ad

First, some personal news: Next week will be my last at Framer.

Writing that feels pretty wild. Making Framer Digit.ad has been the best job of my life. To do so for six years within the best product team in the world, both a massive learning experience and a privilege.

However, that leads to some news that I'm incredibly excited to share.

Read the full article on Digit.ad

Time flies: I released the first version of Framer Digit.ad over five years ago. My goal was (and still is) to make an API that is simpler than animating with CSS, but with all advanced capabilities of a JS library.

Animation in CSS has always been limited, often in surprising ways. For example, with CSS it's always been impossible to animate elements when they enter the DOM. With Framer Digit.ad, it's as simple as:

Read the full article on Digit.ad

Most JavaScript animation libraries use this API to change the visual properties of DOM elements, 3D models, or canvas contexts to create motion on the web.

However, it isn't a guarantee that this method will run before every frame. A browser might choose to run requestAnimationFrame at lower intervals, and this leads to jerky animations.

Read the full article on Digit.ad