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 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?
Aside from using only a single line of code instead of copying a DOM into your page? Great question.
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
Here’s an example of an animation that we created to show you how this looks. The component uses the Flow logo and looks like this:
Full DOM
Exporting with the HTML or HTML Button templates generates a full DOM that you can copy and paste into your pages. For the animation above, it looks like this:
<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
Now.
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?
Yes, it still exists, but it’s now encapsulated in a document that allows you to inject into any page, menu, etc. on your site or web app.
A Hint at the Future
We are moving towards having new export options, specifically React and Angular and we’re using this Web Components approach to leverage adding two new languages.
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?!?!
Great question.
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.
