Flow’s code export is excellent, and for good reason.

First, we’ve been producing award-winning interactive media, installations, and cutting edge interfaces for more than a decade. Flow is the culmination of all of those years of practice and of immersing ourselves in art, tech, and design. We’ve used pretty much every piece of software you can think of, and draw on all our experience to produce Flow. If you want to dive into our background, please check out The Roots of Flow.

Second, we’re experts at writing animation software. Our roots in this started way, way, waaaaay, back with Processing…


This article is a set piece of a series of writings which are an exposition of our thoughts, experience, and reflections from working in design and development wheelhouses, about the SDLC, and the current composition of that workflow, and how things can, could, or we think will evolve.

A year before the first iPhone blew people’s minds, I graduated with an Interactive Arts degree that I was a few years late on starting, and I was madly passionate to find a job as an Interaction Designer — a role that at that time was lipstick on a web-developer. I was…


Late on a Wednesday a few weeks ago I thought to myself, “let’s see if I can make 50 custom iOS loading animations by the end of Sunday…” If I started the next day, that would give me 4 full days to get the job done so that I could start posting them to our Dribbble portfolio. I ended up starting in the afternoon on Thursday, and by lunch on Saturday I was done! It was a marathon of work, but made totally possible using the right tools. Here’s how I did that.

Step 1: Find Inspiration

This is my favourite part. Having a…


In our other article, Learning to Animate by Stealing Other People’s Work we cover all the reasons why we love Dribbble and how to use it to be inspired, learn, pay homage, and promote the work of other amazingly talented people.

Our Process

When we post shots to Dribbble, we often do so en masse. Typically, we do this because we’re diving in on a particular animation theme and we go all-out in generating a whole series of animations at the same time. …


I love being a part of the Dribbble community. There are so many amazing designers creating new concepts, products and aesthetics. Every day I get to see something fresh, something new, something interesting, but what I really like is when designers rebound other people’s work. A rebound is “a shot in response to another shot” they’re an awesome feature that have been around for about 10 years.

There are 3 main reasons I really like rebounds.

Rebound to Learn

The first, best reason to rebound is to learn. In this, I fully agree with Michael Abehsera’s great article: The Art of Stealing: How…


This article is a set piece of a series of writings which are an exposition of our thoughts, experience, and reflections from working in design and development wheelhouses, about the SDLC, the current composition of that workflow, and how things can and will evolve.

This is article #1 of that series.

In many circles, over many pints, and in many threads, lives the often fiercely debated topic of 3rd party libraries. Should you use them or not? Is it good or bad practice? Are they the Devil?

At Flow we’re constantly aware of and dwelling on this dialogue, because engineers…


Heads down, commits up… We’ve been hammering away over the last month to release the latest version of Flow. The big ticket here, is a beta version of Lottie export.

Sadly, we can’t add Lottie animations in Medium – but this is from our blog!

This release opens up our Lottie export. For now we handle shapes, layers, and groups which cover a vast majority of animatable properties necessary for making pretty things.


One of the more subtle aspects of Flow is our code template engine. It allows us to very easily update and maintain or create new export formats.

When we released our React export in December, it had taken us less than a week to produce, test, and ship it… Which is nuts, because our team is small and adding code export to a tool should be really really hard. For us, it’s not… and this is because of Flow’s amazing code template engine.

A few key releases from last year show what I mean:

1.5.1 (Jun 27): 2 templates
1.5.6 (Jul…


Flow now exports React components! Adding a 3rd export platform is a major milestone for us because the true nature of Flow is starting to reveal itself — as a tool that can export to any language, platform and style.

React Toggle Button

The newest export option that Flow offers is a toggle button built in React. After creating your animation and export it, you can integrate it into your site with just two lines of code:

Import it like this:

import ReactButton from "./js/ReactButton";

Use it like this:

<ReactButton elementID={"ReactButton"} callback={null} />

❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎❤︎

Backed by Web Components

Backing this by HTML Web Components made it really…


The latest release of Flow has an awesome new feature that lets you embed your animations in a website, using only a single line of code. It comes with some slick performance upgrades to boot.

A Single Line of Code

We’re overhauling our HTML export to offer the option of exporting using Web Components which allows you to reuse custom elements, and embed them using (typically) a single line of code.

How?

Three main elements come together to make this happen.

  • Javascript stuff — for defining the component’s behaviours.
  • Shadow DOM — for injecting the component into a page.
  • HTML Templates — reusable markup that defines…

Flow

A new class of UI Animation software. Import from Sketch. Animate in Flow. Export production-ready code.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store