Animation Code

Animation Code

Flow File:

Format:

Exporter:

  • Super clean, readable code
  • Uses cool code things
  • Imports UIKit for real
  • No 3rd Party Reliance
  • Really effin' nifty

Mask – Animation Code

The following code shows you the main files the animation you just clicked on.

Made with Flow 1.4.2

Layers

These are the DOM layers. Animations need to be wrapped in a flow-artboard and all layers need to be flow-layer classes. The animation-link is used only to get you here ;).

<div class="animationLink"><a href="/code/docs/animationTest/mask">

    <div class="flow-artboard" id="Mask">
    <div class="flow-layer flowdark"></div>
    <div class="flow-layer flowblue">
        <svg class="flow-layer flowblue-svg" preserveAspectRatio="none" viewBox="0 0 1 1">
            <defs>
                <clipPath id="mask-flowblue-mask" clipPathUnits="objectBoundingBox">
                    <path vector-effect="non-scaling-stroke" d="M0.5,1c0.276,0,0.5,-0.224,0.5,-0.5 0,-0.276,-0.224,-0.5,-0.5,-0.5 -0.276,0,-0.5,0.224,-0.5,0.5 0,0.276,0.224,0.5,0.5,0.5zM0.5,1">
                    </path>
                </clipPath>
            </defs>
        </svg>
        <div class="flow-layer maskshape">
            <svg class="maskshape-svg" preserveAspectRatio="none" viewBox="0 0 1 1">
                <title>maskShape</title>
                <desc>Made with Flow.</desc>
                    <path vector-effect="non-scaling-stroke" d="M0.5,1c0.276,0,0.5,-0.224,0.5,-0.5 0,-0.276,-0.224,-0.5,-0.5,-0.5 -0.276,0,-0.5,0.224,-0.5,0.5 0,0.276,0.224,0.5,0.5,0.5zM0.5,1">
                </path>
            </svg>
            <div class="flow-border maskshape-border"></div>
        </div>
        <div class="flow-layer flowblue_1"></div></div>
    </div>
    <p>&lt; click to view code &gt;</p></a>
</div>
<div id="MaskTimer"></div>

Timeline

A timeline is a set of JS code blocks that conform to the Web Animations API, which is slowly becoming industry-standard.

The Web Animations API can be used in all browsers via a polyfill that will use the full speed native implementation where it exists, and gracefully fall back to a JavaScript implementation otherwise. 

SVG animations (used for shape-specific properties like path) use the <animate> tag, and can be found in the DOM (above).

/**
 * Class representing the Mask timeline.
 *
 * Made with Flow 1.4.2
 */
class Mask {
    /**
     * Returns the timeline's duration in milliseconds.
     */
    static get duration() { return 2000 }

    static artboardAnimation() {
        // Workaround for Safari bug
        return document.querySelector('#Mask.flow-artboard').animate({
            backgroundPosition: ['0px', '1px'],
        }, {
            delay: 0,
            duration: 2000,
        });
    }
    static flowblueAnimation0() {
        return document.querySelector('#Mask .flowblue').animate({
            height: ['4.62px', '220px'],
            top: ['75.01px', '80.01px'],
            left: ['75.01px', '80.01px'],
            width: ['4.66px', '220px'],

        }, {
            delay: 500,
            duration: 1000,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
static maskshapeAnimation0() {
    return document.querySelector('#Mask .maskshape').animate({
        height: ['4.62px', '220px'],
        top: ['2.31px', '109.99px'],
        left: ['2.33px', '109.99px'],
        width: ['4.66px', '220px'],

    }, {
        delay: 500,
        duration: 1000,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}
static flowblue_1Animation0() {
    return document.querySelector('#Mask .flowblue_1').animate({
        top: ['-73.18px', '29.82px'],
        left: ['-73.16px', '29.84px'],

    }, {
        delay: 500,
        duration: 1000,
        easing: 'ease-in-out',
        composite: 'add',
        fill: 'forwards',
    });
}

    /**
     * Creates and returns all animations for this timeline.
     */
    static createAllAnimations() {
        return [
            this.artboardAnimation(),
            this.flowblueAnimation0(),
            this.maskshapeAnimation0(),
            this.flowblue_1Animation0(),
        ]
    }
}

Mask.allShapes = [
    document.querySelector("#Mask .flowblue-svg"),
    document.querySelector("#Mask .maskshape-svg"),
    document.querySelector("#Mask .flowblue-svg"),
    document.querySelector("#Mask .maskshape-svg"),
]

Object.freeze(Mask)

Style

The style for all layers in the animation. Split into two components, the basic layer types and custom styles.

Basic Layer Styles

.flow-layer {
    position: absolute;
    overflow: visible;
    box-sizing: border-box;
    border-width: 0px;
}

.flow-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    box-sizing: border-box;
    border-width: 0px;
}

.flow-border {
    width: 100%;
    height: 100%;
    position: absolute;
    box-sizing: border-box;
    border-style: solid;
    border-width: 0px;
}

path {
    fill-rule: evenodd; 
}

svg {
   overflow: visible;
}

Custom Styles

/**
 * Made with Flow 1.4.2
 */
#Mask.flow-artboard {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: relative;
    padding: 0px;
    margin: 0px auto;
    background-color: #FFFFFF;
}
#Mask .flowdark {
    width: 150px;
    height: 150px;
    left: 0px;
    top: 0px;
    transform: translate(-0%, -0%) rotate(0deg);
    transform-origin: 0% 0%; 0
    background-color: #00000000;
    background-image: url(/images/docs/animationTest/flowDark.png);
    background-size:  100% 100%;
    background-repeat: no-repeat;
    background-position: center;}


#Mask .flowblue {
    width: 4.66px;
    height: 4.62px;
    left: 75.01px;
    top: 75.01px;
    transform: translate(-50%, -50%) rotate(0deg);
    background-color: #00000000;
    clip-path: url(#mask-flowblue-mask);
    -webkit-clip-path: url(#mask-flowblue-mask);}

#Mask .maskshape {
    width: 4.66px;
    height: 4.62px;
    left: 2.33px;
    top: 2.31px;
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0;
    background-color: #00000000;
}

#Mask .maskshape-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #FF0079;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}
#Mask .flowblue_1 {
    width: 150px;
    height: 150px;
    left: -73.16px;
    top: -73.18px;
    transform: translate(-0%, -0%) rotate(0deg);
    transform-origin: 0% 0%; 0
    background-color: #00000000;
    background-image: url(/images/docs/animationTest/flowBlue.png);
    background-size:  100% 100%;
    background-repeat: no-repeat;
    background-position: center;}

Try Flow For Yourself

Subscribe to our newsletter

Love UI Animation? Sign up to receive the latest news, articles, tutorials and resources.

We're diligent and don't spam.

Recent MovingUI Articles

MovingUI is a publication sponsered by FLOW focues on UI animation for IOS and the web...


Animate Your Portfolio with Sketch & Flow

Learn the best ways to use motion to help sell your work and step-up your portfolio.

Read on Medium



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 “”.