SketchFall – HTML Animation Code

Back
Try Flow for Free

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 SketchFall timeline.
 *
 * Made with Flow
 */
class SketchFall {
    /**
     * Returns the timeline's duration in milliseconds.
     */
    static get duration() { return 3000 }

    static artboardAnimation() {
        // Workaround for Safari bug
        return document.querySelector('#SketchFall.flow-artboard').animate({
            backgroundPosition: ['0px', '1px'],
        }, {
            delay: 0,
            duration: 3000,
        });
    }
    static background_diamondAnimation0() {
        return document.querySelector('#SketchFall .background_diamond').animate({
            opacity: [1, 0],
            top: ['103.5px', '323.5px'],

        }, {
            delay: 1200,
            duration: 350,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static background_diamondAnimation1() {
        return document.querySelector('#SketchFall .background_diamond').animate({
            top: ['323.5px', '-137.5px'],

        }, {
            delay: 1550,
            duration: 150,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static background_diamondAnimation2() {
        return document.querySelector('#SketchFall .background_diamond').animate({
            opacity: [0, 0],

        }, {
            delay: 1550,
            duration: 150,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static background_diamondAnimation3() {
        return document.querySelector('#SketchFall .background_diamond').animate({
            opacity: [0, 1],
            top: ['-137.5px', '103.5px'],

        }, {
            delay: 1700,
            duration: 360,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static bottom_right_triAnimation0() {
        return document.querySelector('#SketchFall .bottom_right_tri').animate({
            top: ['132px', '351.5px'],
            opacity: [1, 0],

        }, {
            delay: 1150,
            duration: 340,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static bottom_right_triAnimation1() {
        return document.querySelector('#SketchFall .bottom_right_tri').animate({
            height: ['104px', '105px'],

        }, {
            delay: 1150,
            duration: 440,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static bottom_right_triAnimation2() {
        return document.querySelector('#SketchFall .bottom_right_tri').animate({
            width: ['91px', '89px'],

        }, {
            delay: 1150,
            duration: 470,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static bottom_right_triAnimation3() {
        return document.querySelector('#SketchFall .bottom_right_tri').animate({
            opacity: [0, 0],

        }, {
            delay: 1490,
            duration: 360,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static bottom_right_triAnimation4() {
        return document.querySelector('#SketchFall .bottom_right_tri').animate({
            top: ['351.5px', '-109.5px'],

        }, {
            delay: 1490,
            duration: 360,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static bottom_right_triAnimation5() {
        return document.querySelector('#SketchFall .bottom_right_tri').animate({
            height: ['105px', '104.138px'],

        }, {
            delay: 1590,
            duration: 950,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static bottom_right_triAnimation6() {
        return document.querySelector('#SketchFall .bottom_right_tri').animate({
            width: ['89px', '90.7159px'],

        }, {
            delay: 1620,
            duration: 920,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static bottom_right_triAnimation7() {
        return document.querySelector('#SketchFall .bottom_right_tri').animate({
            top: ['-109.5px', '132px'],
            opacity: [0, 1],

        }, {
            delay: 1850,
            duration: 310,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static bottom_center_triAnimation0() {
        return document.querySelector('#SketchFall .bottom_center_tri').animate({
            opacity: [1, 0],
            top: ['131.97px', '351.5px'],

        }, {
            delay: 1070,
            duration: 430,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static bottom_center_triAnimation1() {
        return document.querySelector('#SketchFall .bottom_center_tri').animate({
            height: ['104.06px', '105px'],

        }, {
            delay: 1070,
            duration: 550,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static bottom_center_triAnimation2() {
        return document.querySelector('#SketchFall .bottom_center_tri').animate({
            top: ['351.5px', '-109.5px'],

        }, {
            delay: 1500,
            duration: 380,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static bottom_center_triAnimation3() {
        return document.querySelector('#SketchFall .bottom_center_tri').animate({
            opacity: [0, 0],

        }, {
            delay: 1500,
            duration: 380,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static bottom_center_triAnimation4() {
        return document.querySelector('#SketchFall .bottom_center_tri').animate({
            height: ['105px', '104.194px'],

        }, {
            delay: 1620,
            duration: 920,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static bottom_center_triAnimation5() {
        return document.querySelector('#SketchFall .bottom_center_tri').animate({
            opacity: [0, 1],
            top: ['-109.5px', '131.97px'],

        }, {
            delay: 1880,
            duration: 350,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static bottom_left_triAnimation0() {
        return document.querySelector('#SketchFall .bottom_left_tri').animate({
            width: ['88.68px', '89px'],
            height: ['103.88px', '105px'],

        }, {
            delay: 950,
            duration: 670,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static bottom_left_triAnimation1() {
        return document.querySelector('#SketchFall .bottom_left_tri').animate({
            top: ['132.2px', '351.5px'],
            opacity: [1, 0],

        }, {
            delay: 950,
            duration: 430,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static bottom_left_triAnimation2() {
        return document.querySelector('#SketchFall .bottom_left_tri').animate({
            top: ['351.5px', '-109.5px'],

        }, {
            delay: 1380,
            duration: 530,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static bottom_left_triAnimation3() {
        return document.querySelector('#SketchFall .bottom_left_tri').animate({
            opacity: [0, 0],

        }, {
            delay: 1380,
            duration: 530,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static bottom_left_triAnimation4() {
        return document.querySelector('#SketchFall .bottom_left_tri').animate({
            width: ['89px', '88.7255px'],
            height: ['105px', '104.039px'],

        }, {
            delay: 1620,
            duration: 920,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static bottom_left_triAnimation5() {
        return document.querySelector('#SketchFall .bottom_left_tri').animate({
            top: ['-109.5px', '132.2px'],
            opacity: [0, 1],

        }, {
            delay: 1910,
            duration: 380,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_right_right_triAnimation0() {
        return document.querySelector('#SketchFall .top_right_right_tri').animate({
            width: ['39.88px', '39px'],
            height: ['52px', '53px'],

        }, {
            delay: 850,
            duration: 770,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_right_right_triAnimation1() {
        return document.querySelector('#SketchFall .top_right_right_tri').animate({
            top: ['54.13px', '273.5px'],
            opacity: [1, 0],

        }, {
            delay: 850,
            duration: 490,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_right_right_triAnimation2() {
        return document.querySelector('#SketchFall .top_right_right_tri').animate({
            top: ['273.5px', '-187.5px'],

        }, {
            delay: 1340,
            duration: 620,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_right_right_triAnimation3() {
        return document.querySelector('#SketchFall .top_right_right_tri').animate({
            opacity: [0, 0],

        }, {
            delay: 1340,
            duration: 620,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_right_right_triAnimation4() {
        return document.querySelector('#SketchFall .top_right_right_tri').animate({
            width: ['39px', '39.755px'],
            height: ['53px', '52.1421px'],

        }, {
            delay: 1620,
            duration: 920,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_right_right_triAnimation5() {
        return document.querySelector('#SketchFall .top_right_right_tri').animate({
            top: ['-187.5px', '54.13px'],
            opacity: [0, 1],

        }, {
            delay: 1960,
            duration: 390,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_right_triAnimation0() {
        return document.querySelector('#SketchFall .top_right_tri').animate({
            opacity: [1, 0],

        }, {
            delay: 520,
            duration: 400,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_right_triAnimation1() {
        return document.querySelector('#SketchFall .top_right_tri').animate({
            top: ['51.5px', '271.5px'],

        }, {
            delay: 520,
            duration: 240,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_right_triAnimation2() {
        return document.querySelector('#SketchFall .top_right_tri').animate({
            width: ['54px', '55px'],

        }, {
            delay: 520,
            duration: 560,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_right_triAnimation3() {
        return document.querySelector('#SketchFall .top_right_tri').animate({
            top: ['271.5px', '-189.5px'],

        }, {
            delay: 760,
            duration: 1270,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_right_triAnimation4() {
        return document.querySelector('#SketchFall .top_right_tri').animate({
            opacity: [0, 0],

        }, {
            delay: 920,
            duration: 570,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_right_triAnimation5() {
        return document.querySelector('#SketchFall .top_right_tri').animate({
            width: ['55px', '54.1421px'],

        }, {
            delay: 1080,
            duration: 1460,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_right_triAnimation6() {
        return document.querySelector('#SketchFall .top_right_tri').animate({
            opacity: [0, 1],

        }, {
            delay: 1490,
            duration: 350,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_right_triAnimation7() {
        return document.querySelector('#SketchFall .top_right_tri').animate({
            top: ['-189.5px', '51.5px'],

        }, {
            delay: 2030,
            duration: 350,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_center_triAnimation0() {
        return document.querySelector('#SketchFall .top_center_tri').animate({
            opacity: [1, 0],
            top: ['51.5px', '271.5px'],

        }, {
            delay: 480,
            duration: 410,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_center_triAnimation1() {
        return document.querySelector('#SketchFall .top_center_tri').animate({
            opacity: [0, 0],

        }, {
            delay: 890,
            duration: 1190,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_center_triAnimation2() {
        return document.querySelector('#SketchFall .top_center_tri').animate({
            top: ['271.5px', '-189.5px'],

        }, {
            delay: 890,
            duration: 1190,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_center_triAnimation3() {
        return document.querySelector('#SketchFall .top_center_tri').animate({
            opacity: [0, 1],
            top: ['-189.5px', '51.5px'],

        }, {
            delay: 2080,
            duration: 350,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_left_triAnimation0() {
        return document.querySelector('#SketchFall .top_left_tri').animate({
            opacity: [1, 0],
            top: ['51.5px', '271.5px'],

        }, {
            delay: 260,
            duration: 440,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_left_triAnimation1() {
        return document.querySelector('#SketchFall .top_left_tri').animate({
            width: ['54px', '51px'],

        }, {
            delay: 260,
            duration: 820,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_left_triAnimation2() {
        return document.querySelector('#SketchFall .top_left_tri').animate({
            top: ['271.5px', '-189.5px'],

        }, {
            delay: 700,
            duration: 1410,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_left_triAnimation3() {
        return document.querySelector('#SketchFall .top_left_tri').animate({
            opacity: [0, 0],

        }, {
            delay: 700,
            duration: 1410,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_left_triAnimation4() {
        return document.querySelector('#SketchFall .top_left_tri').animate({
            width: ['51px', '53.5738px'],

        }, {
            delay: 1080,
            duration: 1460,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_left_triAnimation5() {
        return document.querySelector('#SketchFall .top_left_tri').animate({
            opacity: [0, 1],
            top: ['-189.5px', '51.5px'],

        }, {
            delay: 2110,
            duration: 350,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_left_left_triAnimation0() {
        return document.querySelector('#SketchFall .top_left_left_tri').animate({
            top: ['54.25px', '273.5px'],
            opacity: [1, 0],

        }, {
            delay: 0,
            duration: 470,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_left_left_triAnimation1() {
        return document.querySelector('#SketchFall .top_left_left_tri').animate({
            height: ['52px', '53px'],

        }, {
            delay: 0,
            duration: 1080,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_left_left_triAnimation2() {
        return document.querySelector('#SketchFall .top_left_left_tri').animate({
            opacity: [0, 0],

        }, {
            delay: 470,
            duration: 1700,
            easing: 'ease-in-out',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_left_left_triAnimation3() {
        return document.querySelector('#SketchFall .top_left_left_tri').animate({
            top: ['273.5px', '-187.5px'],

        }, {
            delay: 470,
            duration: 1700,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_left_left_triAnimation4() {
        return document.querySelector('#SketchFall .top_left_left_tri').animate({
            height: ['53px', '52.1421px'],

        }, {
            delay: 1080,
            duration: 1460,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }
    static top_left_left_triAnimation5() {
        return document.querySelector('#SketchFall .top_left_left_tri').animate({
            top: ['-187.5px', '54.25px'],
            opacity: [0, 1],

        }, {
            delay: 2170,
            duration: 320,
            easing: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
            composite: 'add',
            fill: 'forwards',
        });
    }

    /**
     * Creates and returns all animations for this timeline.
     */
    static createAllAnimations() {
        return [
            this.artboardAnimation(),
            this.background_diamondAnimation0(),
            this.background_diamondAnimation1(),
            this.background_diamondAnimation2(),
            this.background_diamondAnimation3(),
            this.bottom_right_triAnimation0(),
            this.bottom_right_triAnimation1(),
            this.bottom_right_triAnimation2(),
            this.bottom_right_triAnimation3(),
            this.bottom_right_triAnimation4(),
            this.bottom_right_triAnimation5(),
            this.bottom_right_triAnimation6(),
            this.bottom_right_triAnimation7(),
            this.bottom_center_triAnimation0(),
            this.bottom_center_triAnimation1(),
            this.bottom_center_triAnimation2(),
            this.bottom_center_triAnimation3(),
            this.bottom_center_triAnimation4(),
            this.bottom_center_triAnimation5(),
            this.bottom_left_triAnimation0(),
            this.bottom_left_triAnimation1(),
            this.bottom_left_triAnimation2(),
            this.bottom_left_triAnimation3(),
            this.bottom_left_triAnimation4(),
            this.bottom_left_triAnimation5(),
            this.top_right_right_triAnimation0(),
            this.top_right_right_triAnimation1(),
            this.top_right_right_triAnimation2(),
            this.top_right_right_triAnimation3(),
            this.top_right_right_triAnimation4(),
            this.top_right_right_triAnimation5(),
            this.top_right_triAnimation0(),
            this.top_right_triAnimation1(),
            this.top_right_triAnimation2(),
            this.top_right_triAnimation3(),
            this.top_right_triAnimation4(),
            this.top_right_triAnimation5(),
            this.top_right_triAnimation6(),
            this.top_right_triAnimation7(),
            this.top_center_triAnimation0(),
            this.top_center_triAnimation1(),
            this.top_center_triAnimation2(),
            this.top_center_triAnimation3(),
            this.top_left_triAnimation0(),
            this.top_left_triAnimation1(),
            this.top_left_triAnimation2(),
            this.top_left_triAnimation3(),
            this.top_left_triAnimation4(),
            this.top_left_triAnimation5(),
            this.top_left_left_triAnimation0(),
            this.top_left_left_triAnimation1(),
            this.top_left_left_triAnimation2(),
            this.top_left_left_triAnimation3(),
            this.top_left_left_triAnimation4(),
            this.top_left_left_triAnimation5(),
        ]
    }
}

SketchFall.allShapes = [
    document.querySelector("#SketchFall .background_diamond-svg"),
    document.querySelector("#SketchFall .bottom_right_tri-svg"),
    document.querySelector("#SketchFall .bottom_center_tri-svg"),
    document.querySelector("#SketchFall .bottom_left_tri-svg"),
    document.querySelector("#SketchFall .top_right_right_tri-svg"),
    document.querySelector("#SketchFall .top_right_tri-svg"),
    document.querySelector("#SketchFall .top_center_tri-svg"),
    document.querySelector("#SketchFall .top_left_tri-svg"),
    document.querySelector("#SketchFall .top_left_left_tri-svg"),
    document.querySelector("#SketchFall .background_diamond-svg"),
    document.querySelector("#SketchFall .bottom_right_tri-svg"),
    document.querySelector("#SketchFall .bottom_center_tri-svg"),
    document.querySelector("#SketchFall .bottom_left_tri-svg"),
    document.querySelector("#SketchFall .top_right_right_tri-svg"),
    document.querySelector("#SketchFall .top_right_tri-svg"),
    document.querySelector("#SketchFall .top_center_tri-svg"),
    document.querySelector("#SketchFall .top_left_tri-svg"),
    document.querySelector("#SketchFall .top_left_left_tri-svg"),
]

Object.freeze(SketchFall)

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


path {
    fill-rule: evenodd; 
}

svg {
   overflow: visible;
}

.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;
}

#SketchFall.flow-artboard {
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative;
    padding: 0px;
    margin: 0px auto;
    background-color: #130A332C;
}

#SketchFall .background_diamond {
    width: 177px;
    height: 161px;
    left: 100.26px;
    top: 103.5px;
    transform: translate(-50%, -50%) rotate(0deg);
    background-color: #00000000;
    overflow: visible;
}

#SketchFall .background_diamond-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #FDB300;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}

#SketchFall .bottom_right_tri {
    width: 91px;
    height: 104px;
    left: 146.13px;
    top: 132px;
    transform: translate(-50%, -50%) rotate(0deg);
    background-color: #00000000;
    overflow: visible;
}

#SketchFall .bottom_right_tri-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #EA6C00;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}

#SketchFall .bottom_center_tri {
    width: 107px;
    height: 104.06px;
    left: 100.56px;
    top: 131.97px;
    transform: translate(-50%, -50%) rotate(0deg);
    background-color: #00000000;
    overflow: visible;
}

#SketchFall .bottom_center_tri-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #FDAD00;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}

#SketchFall .bottom_left_tri {
    width: 88.68px;
    height: 103.88px;
    left: 56.22px;
    top: 132.2px;
    transform: translate(-50%, -50%) rotate(0deg);
    background-color: #00000000;
    overflow: visible;
}

#SketchFall .bottom_left_tri-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #EA6C00;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}

#SketchFall .top_right_right_tri {
    width: 39.88px;
    height: 52px;
    left: 171.69px;
    top: 54.13px;
    transform: translate(-50%, -50%) rotate(0deg);
    background-color: #00000000;
    overflow: visible;
}

#SketchFall .top_right_right_tri-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #FDAD00;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}

#SketchFall .top_right_tri {
    width: 54px;
    height: 57px;
    left: 127.76px;
    top: 51.5px;
    transform: translate(-50%, -50%) rotate(0deg);
    background-color: #00000000;
    overflow: visible;
}

#SketchFall .top_right_tri-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #FDD231;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}

#SketchFall .top_center_tri {
    width: 107px;
    height: 57px;
    left: 101.38px;
    top: 51.5px;
    transform: translate(-50%, -50%) rotate(0deg);
    background-color: #00000000;
    overflow: visible;
}

#SketchFall .top_center_tri-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #FEEEB7;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}

#SketchFall .top_left_tri {
    width: 54px;
    height: 57px;
    left: 75px;
    top: 51.5px;
    transform: translate(-50%, -50%) rotate(0deg);
    background-color: #00000000;
    overflow: visible;
}

#SketchFall .top_left_tri-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #FDD231;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}

#SketchFall .top_left_left_tri {
    width: 39px;
    height: 52px;
    left: 31.63px;
    top: 54.25px;
    transform: translate(-50%, -50%) rotate(0deg);
    background-color: #00000000;
    overflow: visible;
}

#SketchFall .top_left_left_tri-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    fill: #FDAD00;
    stroke-miterlimit: 10;
    stroke-width: 0px;
}

Try Flow For Yourself

Try Flow for Free
flow design code

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

Choosing The Best Animation Tool for Sketch

The Ultimate Guide to UI Animation Tools for Sketch Users in 2019

Read on Medium

Building Brand Loyalty and Reducing Anxiety with UI Animation

Turn moments of anxiety into opportunities to delight users and build emotional bonds with animation.

Read on Medium

Embracing Your Animated Future

A designer’s guide to learning UI Animation and animating Sketch designs.

Read on Medium

Slack logo

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