Animated SVG

by Apple Ilagan

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js?r=5"></script>
<script src="http://fonts.googleapis.com/css?family=Lato:300,400,900"></script>
<form class="sub-form">
    <div class="input-contain">
        <div class="circle circle-quill">
            <svg class="quill" x="0px" y="0px" width="25.167px" height="25.167px" viewBox="0 0 25.167 25.167" enable-background="new 0 0 25.167 25.167" xml:space="preserve">
                <path fill="#4e3332" d="M0,25C3.125,15.625,11.304,0,25,0c-6.421,5.151-9.375,17.188-14.062,17.188s-4.688,0-4.688,0L1.562,25H0z" />
            </svg>
        </div>
        <div class="circle circle-paper">
            <svg class="paper" x="0" y="0" width="25.1" height="25.1" viewBox="0 0 25.1 25.1" enable-background="new 0 0 25.125 25.125" xml:space="preserve">
                <path fill="#b1dbd3" d="M24 2.1C23.5 2.3 1.2 10.2 0.8 10.3c-0.4 0.1-0.5 0.5 0 0.6 0.5 0.2 5 2 5 2H5.8l3 1.2c0 0 14.2-10.4 14.4-10.6 0.2-0.1 0.4 0.1 0.3 0.3 -0.1 0.2-10.3 11.2-10.3 11.2 0 0 0 0 0 0l-0.6 0.7 0.8 0.4c0 0 6.1 3.3 6.5 3.5 0.4 0.2 0.9 0 1-0.4 0.1-0.6 3.7-16.1 3.8-16.4C24.7 2.3 24.4 2 24 2.1zM8.7 21.2c0 0.3 0.2 0.4 0.4 0.2 0.3-0.3 3.7-3.4 3.7-3.4l-4.2-2.2V21.2z" />
            </svg>
        </div>
         <h2 class="info">want more information?</h2>

         <h2 class="success">Success!</h2>

        <input type="text" id="firstname" name="firstname" placeholder="full name" required maxlength="100" />
        <input type="email" placeholder="email" name="email" required="required" />
        <div class="allsub">
            <div class="submit">Contact Us Today</div>
            <div class="submit-under"></div>
        </div>
        <!--allsub-->
        <svg class="loader" x="0px" y="0px" width="55px" height="55px" viewBox="0 0 55 55" enable-background="new 0 0 55 55" xml:space="preserve">
            <circle fill="none"...

CSS

$gray: #faf5f3;
 $gray-lt: lighten($gray, 10%);
 $gray-dk: darken($gray, 10%);
 $green: #7aada5;
 $green-lt: lighten($green, 10%);
 $green-dk: darken($green, 10%);
 html, body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/form-bk.jpg") no-repeat center center;
    background-size: cover;
    font-family:'Lato', sans-serif;
}
form {
    background: $gray;
    width: 280px;
    margin-top: 50px;
    margin-bottom: 50px;
    position: absolute;
    z-index: 10;
    padding: 60px 60px 80px;
    left: 50%;
    margin-left: -230px;
    opacity: 0.85;
    h2 {
        text-transform: uppercase;
        text-align: center;
        font-size: 18px;
        color: darken(#4e3332, 10%);
        letter-spacing: 0.061em;
        margin-top: 60px;
        margin-bottom: 20px;
        &.success {
            color: #356e64;
            margin-top: -40px;
            margin-bottom: 0px;
            padding: 0;
        }
    }
    p.success-dialog {
        margin-top: -150px;
        color: #356e64;
        letter-spacing: 0.02em;
        text-align: center;
        line-height: 1.8em;
        text-transform: uppercase;
        a {
            color: #9d775f;
            text-decoration: none;
            transition: 0.8s all ease;
            &:hover {
                color: #c08159;
                transition: 0.4s all ease;
            }
        }
    }
    input {
        width: 100%;
        background: #fff;
        text-align: center;
        margin-bottom: 25px;
        box-shadow: none;
        appearance: none;
        border: none;
        border-top: 1px solid #fff;
        border-left: 1px solid #fff;
        border-right: 1px solid #fff;
        border-bottom: 1px solid $gray-dk;
        padding-top: 8px;
        padding-bottom: 8px;
        text-transform: uppercase;
        font-size: 11px;
        position: relative;
        z-index: 500;
        letter-spacing:...

JavaScript

$(document).ready(function () {
    tl = new TimelineLite();
    var form = $(".sub-form"),
        sub = $(".submit-under"),
        allsub = $(".allsub"),
        loader = $(".loader circle"),
        loader2 = $(".loader2 circle"),
        loaders = [loader, loader2],
        circP = $(".circle-paper");

    TweenMax.set(sub, {
        opacity: 0.7,
        rotationY: 90
    });
    TweenMax.set($(".submit-under, .loader, .loader2, .circle-paper, p.success-dialog, h2.success"), {
        visibility: "visible"
    });
    TweenMax.set(loader, {
        drawSVG: '100% 100%',
        rotation: -90
    });
    TweenMax.set(circP, {
        scaleY: 0,
        transformOrigin: "50% 50%"
    });
    TweenMax.set([loader2, circP], {
        opacity: 0
    });
    TweenMax.set($(".success, .success-dialog"), {
        opacity: 0
    });

    $(".submit").on("click", function (e) {
        e.preventDefault;
        tl.to(sub, 1, {
            opacity: 1,
            rotationY: 0,
            ease: Expo.easeOut
        });
        tl.add("flip");
        tl.to($(".submit"), 0.5, {
            rotationX: 90,
            ease: Circ.easeOut
        }, "flip-=1.5");
        tl.to($(".submit"), 0.5, {
            opacity: 0
        }, "flip-=0.5");
        tl.to(sub, 0.25, {
            css: {
                borderRadius: "50%",
                backgroundColor: "#d6c7ca"
            },
            ease: Circ.easeOut
        }, "flip-=0.5");
        tl.to(sub, 1.2, {
            scaleX: 0.16,
            transformOrigin: "50% 50%",
            ease: Expo.easeOut
        }, "flip-=0.5");
        tl.fromTo(loader, 1, {
            transformOrigin: "50% 50%",
            drawSVG: "50% 50%"
        }, {
            transformOrigin: "50% 50%",
            drawSVG: "100%"
        }, "flip+=1");
        tl.to(sub, 0.8, {
            rotationX: 90,
            scaleY: 0
        }, "flip+=1.2");
        tl.to(loader2, 0.1, {
            opacity: 1
        }, "flip+=1.8");
       ...