css grid - animated paths

by ian_smithz

HTML

<section class="services-box is-black fade-in-group">

					<div class="wrap">

						<div class="is-grid">

							<div class="services-col fade-in-item">

								<div class="headline-box padding">

									<h2 class="is-primary is-text-right">Weitere Leistungen in den Bereichen:</h2>

								</div>

							</div>

							<div class="services-col is-text-centered fade-in-item svg-parent">

								<div class="padding primary hs">

									<figure>
										<svg class="draw-svg" version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
											 viewBox="0 0 312.4 132.6" style="enable-background:new 0 0 312.4 132.6;" xml:space="preserve">
											<style type="text/css">
												.map0{fill:none;stroke:#010202;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
												.map1{fill:none;stroke:#010202;stroke-width:6;stroke-linejoin:round;stroke-miterlimit:10;}
											</style>
											<line class="map0" x1="3" y1="33.8" x2="99.3" y2="129.6"/>
											<line class="map0" x1="69" y1="7.9" x2="165.1" y2="103.7"/>
											<line class="map0" x1="155.8" y1="17.6" x2="251.5" y2="112.9"/>
											<line class="map0" x1="213.3" y1="3" x2="309.4" y2="98"/>
											<line class="map0" x1="213.3" y1="3" x2="155.8" y2="17.6"/>
											<line class="map0" x1="155.8" y1="17.6" x2="69" y2="7.9"/>
											<line class="map0" x1="3" y1="33.8" x2="69" y2="7.9"/>
											<line class="map0" x1="99.3" y1="129.6" x2="165.1" y2="103.7"/>
											<line class="map0" x1="251.5" y1="112.9" x2="165.1" y2="103.7"/>
											<line class="map0" x1="309.4" y1="98" x2="251.5" y2="112.9"/>
											<path class="map1" d="M96,33.4c3.7-0.7,7.8-1,12-1c18.6,0,33.7,6.9,33.7,15.4c0,8.5-15.1,15.4-33.7,15.4c-18.6,0-33.6-6.9-33.6-15.4
											c0-6.1,7.7-11.4,19-13.9"/>
											<path class="map1"...

CSS

*, *::before, *::after {
    box-sizing: border-box;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, hr, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, textarea, select, button, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, picture {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0 none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
html, body,
input, textarea, select, button {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  font-size: 16px;
}
.hs {
  height: 100%;
}
.primary {
    background-color: rgb(249, 235, 0);
}
.is-primary {
    color: rgb(249, 235, 0);
}
.is-black {
    color: rgb(0, 0, 0);
}
.is-text-right {
    text-align: right;
}
.is-text-centered {
  text-align: center;
}
.wrap {
  min-width: 1280px;
  width: 66.66vw;
  margin-left: auto;
  margin-right: auto;
}
.fade-in{
	opacity: 0;
}
.fade-in-group > .col, .fade-in-group  .services-col {
	-webkit-transform: translate3d(0,105px,0);
	-moz-transform: translate3d(0,105px,0);
	-ms-transform: translate3d(0,105px,0);
	-o-transform: translate3d(0,105px,0);
	transform: translate3d(0,0px,0);
	opacity: 0;
	transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.55s linear 0.35s
}

.fade-in-group > .col.out , .fade-in-group .services-col.out {
	-webkit-transform: translate3d(0,0px,0);
	-moz-transform: translate3d(0,0px,0);
	-ms-transform: translate3d(0,0px,0);
	-o-transform: translate3d(0,0px,0);
	transform: translate3d(0,0px,0);
	opacity: 1;
	transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.55s linear 0.35s
}
.headline-box {
    align-items: center;
   ...

JavaScript

var controller = new ScrollMagic.Controller(),
    groupController = new ScrollMagic.Controller(),
    fadeInGroup = $(".fade-in-group"),
    fadeInCards = $(".fade-in-group .fade-in-item"),
    windowHeight = $(window).height(),
    svgIcon = $(".draw-svg");

// animate filled paths function
var animateFIll = function(childPath) {
    if (childPath.filter(".svg-fill")) {
        TweenMax.to(childPath.filter(".svg-fill"), 1, {
            attr: { "fill-opacity": 1 }
        });
    }
};

// drawSVGLines function
var drawPageSVG = function($this) {
    if ($this.hasClass("svg-parent")) {
        childSVG = $this.find(".draw-svg");
        childPath = childSVG.find("*");
        new TweenMax.to(
            childPath,
            2,
            {
                drawSVG: "100%"
            }
        ).eventCallback("onComplete", animateFIll, [childPath]);
        if ($this.has("p")) {
            new TweenMax.to($this.find("p"), 2, { opacity: 1 });
        }
    }
};

// Blocks Fade in function
var fadeInItems = function(Group) {
    // Loop through chidren and fade them in one by one
    Group.find(".fade-in-item").each(function(i) {
        var $this = $(this);
        setTimeout(function() {
            $this.addClass("out");
        }, i * 500);
    });
};

// loop through all elements
$(".fade-in").each(function() {
    var $this = $(this);
    // build a tween
    var tween = new TimelineMax()
        .from($(this), 1, { y: "+=15", ease: Power2.easeInOut })
        .to($(this), 0.5, { autoAlpha: 1, ease: Linear.easeNone }, ".4", "-1")
        .eventCallback("onComplete", drawPageSVG, [$this]);

    // build a scene
    var scene = new ScrollMagic.Scene({
        triggerElement: this,
        triggerHook: 0.85,
        reverse: false
    })
        .setTween(tween) // trigger a TweenMax.to tween
        .addTo(controller);
});

//Prepere SVG elements for animation
TweenMax.to(svgIcon.find("*"), 0, { drawSVG: "0%" });
TweenMax.to(svgIcon.find(".svg-fill"), 0, {...