Image for post
Image for post

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

How?

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

Our new HTML Button — WebComponent export option packs up your animation into these three things and gives you the option to then embed your button as a reusable component.

Why?

Because it sets us up for exporting to React, and Angular.

So, in a nutshell:

  • easier to integrate your stuff
  • reusable elements for you to use
  • gets us more export languages for Flow

An Example

Image for post
Image for post

Full DOM

<div onclick="buttonFlowButton.toggle(true)" class="flow-artboard" id="FlowButton-ButtonID">
<div class="flow-artboard" style="visibility: hidden;">
<div class="flow-artboard" id="FlowButton">
<div class="flow-layer w_blue">
<svg class="w_blue-svg" preserveAspectRatio="none" viewBox="0 0 28 28">
<title>W-Blue</title>
<desc>Made with Flow.</desc>
<defs id="w_blue-defs">
</defs>
<path id="w_blue-path" vector-effect="non-scaling-stroke" d="M0,26.451c0,0,0,-24.904,0,-24.904 0,-0.854,0.692,-1.547,1.547,-1.547 0,0,24.904,0,24.904,0 1.378,0,2.068,1.666,1.094,2.64 0,0,-24.904,24.905,-24.904,24.905 -0.975,0.974,-2.64,0.284,-2.64,-1.094">
</path>
</svg>
<div class="flow-border w_blue-border"></div>
</div>
<div class="flow-layer w_red">
<svg class="w_red-svg" preserveAspectRatio="none" viewBox="0 0 28 28">
<title>W-Red</title>
<desc>Made with Flow.</desc>
<defs id="w_red-defs">
</defs>
<path id="w_red-path" vector-effect="non-scaling-stroke" d="M0,26.451c0,0,0,-24.904,0,-24.904 0,-0.854,0.692,-1.547,1.547,-1.547 0,0,24.904,0,24.904,0 1.378,0,2.068,1.666,1.094,2.64 0,0,-24.904,24.905,-24.904,24.905 -0.975,0.974,-2.64,0.284,-2.64,-1.094">
</path>
</svg>
<div class="flow-border w_red-border"></div>
</div>
<div class="flow-layer w_pink">
<svg class="w_pink-svg" preserveAspectRatio="none" viewBox="0 0 12 14.18">
<title>W-Pink</title>
<desc>Made with Flow.</desc>
<defs id="w_pink-defs">
</defs>
<path id="w_pink-path" vector-effect="non-scaling-stroke" d="M0,14.18c0,0,0,-12.634,0,-12.634 0,-0.854,0.692,-1.546,1.547,-1.546 0,0,8.904,0,8.904,0 1.378,0,2.068,1.665,1.094,2.639 0,0,-11.544,11.541,-11.544,11.541zM0,14.18">
</path>
</svg>
<div class="flow-border w_pink-border"></div>
</div>
<div class="flow-layer o">
<svg class="o-svg" preserveAspectRatio="none" viewBox="0 0 30 30">
<title>O</title>
<desc>Made with Flow.</desc>
<defs id="o-defs">
</defs>
<path id="o-path" vector-effect="non-scaling-stroke" d="M15,30c0,0,0,0,0,0 -8.284,0,-15,-6.716,-15,-15 0,0,0,0,0,0 0,-8.284,6.716,-15,15,-15 0,0,0,0,0,0 8.284,0,15,6.715,15,15 0,0,0,0,0,0 0,8.284,-6.716,15,-15,15">
</path>
</svg>
<div class="flow-border o-border"></div>
</div>
<div class="flow-layer l">
<svg class="l-svg" preserveAspectRatio="none" viewBox="0 0 28 28">
<title>L</title>
<desc>Made with Flow.</desc>
<defs id="l-defs">
</defs>
<path id="l-path" vector-effect="non-scaling-stroke" d="M26.451,28c0,0,-24.904,0,-24.904,0 -0.854,0,-1.547,-0.692,-1.547,-1.547 0,0,0,-24.904,0,-24.904 0,-1.378,1.666,-2.068,2.64,-1.094 0,0,24.905,24.904,24.905,24.904 0.974,0.975,0.284,2.64,-1.094,2.64">
</path>
</svg>
<div class="flow-border l-border"></div>
</div>
<div class="flow-layer f">
<svg class="f-svg" preserveAspectRatio="none" viewBox="0 0 28 28">
<title>F</title>
<desc>Made with Flow.</desc>
<defs id="f-defs">
</defs>
<path id="f-path" vector-effect="non-scaling-stroke" d="M0,26.451c0,0,0,-24.904,0,-24.904 0,-0.854,0.692,-1.547,1.547,-1.547 0,0,24.904,0,24.904,0 1.378,0,2.068,1.666,1.094,2.64 0,0,-24.904,24.905,-24.904,24.905 -0.975,0.974,-2.64,0.284,-2.64,-1.094">
</path>
</svg>
<div class="flow-border f-border"></div>
</div>
</div>
</div>
</div>

With Web Components

Check this out:

<flowbutton-button id="flowbuttonButton" onclick="flowbuttonButton.toggle(true)"></flowbutton-button>

That’s what you have to drop into your page with our new approach.

Nice, right?

Right?

But That DOM Still Exists Somewhere Right?

A Hint at the Future

This news is actually centered around exposing an API for developing new templates with Flow. Soon, developers will be able to create their own export templates, either by modifying one of ours or creating an entirely new one from scratch.

Keep an eye out.

Wait. What’s Flow?!?!

Flow is a UI Animation and code export tool for animating Sketch files and eliminating the most painful parts of hand-off in app development. It bridges the gap between design and development by exporting production-ready native code for iOS and HTML.

Our Site

Get a Copy

Originally published at https://createwithflow.com on December 13, 2019.

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