release168

Web Components

・Travis

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 resuse 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 resuable 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
  • resuable 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:

FlowButtonAnimated
A sample of the animation forward and backward.

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.

Try Flow For Yourself

Slack logo

Discuss. Connect. Share.

background Made with Flow.
underscore Made with Flow.
line2 Made with Flow.
line1 Made with Flow.
circle Made with Flow.
hit Made with Flow.

result(s) found for “”.