Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <svg id="master" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 1000" width="2000" height="1000" stroke-linejoin="round" stroke-linecap="round"> 
<rect x="0" y="0" width="2000" height="1000" fill="#fff" /> 

<g fill="#262626">
  <rect x="900" y="400" width="100" height="100" />
  <rect x="1900" y="400" width="100" height="100" />
  <rect x="900" y="900" width="100" height="100" />
  <rect x="1900" y="900" width="100" height="100" />
  <rect x="0" y="0" width="2000" height="60" />
  <rect x="0" y="500" width="2000" height="60" />
</g>
<g font-size="60" fill="#aaa" text-anchor="middle">
  <text transform="translate(950 470)">1</text>
  <text transform="translate(1950 470)">2</text>
  <text transform="translate(950 970)">3</text>
  <text transform="translate(1950 970)">4</text>
</g>

<g text-anchor="middle" font-size="30" class="globalFill">
  <text transform="translate(500 40)">Jumping Lines</text>
  <text transform="translate(1500 40)">Tab Popper With Accent Burst</text>
  <text transform="translate(500 540)">Sneaky, Stretchy Capsule</text>
  <text transform="translate(1500 540)">Rolling Square</text>
</g>
<line x1="0" y1="500" x2="2000" y2="500" stroke-width="2" stroke="#000"/>
<line x1="1000" y1="0" x2="1000" y2="1000" stroke-width="2" stroke="#000"/>  
<g id="demo1" class="demoGroup">
  <g class="bg">
    <line id="topLine" x1="0" y1="0" x2="0" y2="0" stroke-width="0" />

  </g>
  <polyline id="d1Target" stroke-width="0" stroke="none" fill="none" points="" class="globalStroke"></polyline>
  <g id="textStuff">

  </g>
</g>
<g id="demo2" class="demoGroup">
  <g class="bg"></g>

  <g id="burstLines">
    <g id="d2BurstLeft" stroke-width="4" class="globalStroke">
      <line x1="30" y1="30" x2="24" y2="0" />
      <line x1="30" y1="30" x2="8" y2="8" />
      <line x1="30" y1="30" x2="0" y2="24" />

    </g>
    <g id="d2BurstRight" stroke-width="4" class="globalStroke">
      <line x1="0" y1="30" x2="8" y2="0" />
      <line x1="0" y1="30" x2="22" y2="8" />
      <line x1="0" y1="30" x2="30" y2="24" />

    </g>

  </g>

  <line id="d2BottomLine" x1="0" y1="0" x2="0" y2="0" stroke-width="0" class="globalStroke" />
  <rect id="d2Target" x="0" y="0" width="0" height="0" fill="#000" rx="3" class="globalFill" />
  <line id="shadow" x1="0" y1="0" x2="0" y2="0" stroke-width="2" stroke="#000" , opacity="0.15" />
</g>
  <g id="demo3" class="demoGroup"><g class="bg">
  <rect id="outline" x="0" y="0" width="0" height="0" fill="none" rx="0" stroke-width="0"/>
  <rect id="capsule" x="0" y="0" width="0" height="0" rx="0" class="globalFill"/>  
    
    
    </g></g>
  <g id="demo4" class="demoGroup"><g class="bg">
    <line id="rollLine" x1="0" y1="0" x2="0" y2="0" stroke-width="1" stroke="#333"/>
    <rect id="square4" x="0" y="0" width="0" height="0" class="globalFill"/> 
    
    </g></g>

</svg>
<div id="controls">
  <h2>SVG Menu Experiments</h2>
  <div>
    <div id="buttonWrap">
      <p>viewBox</p>

      <div class="zoomWrap">
        <button data-view="0 0 1000 500">1</button>
        <button data-view="1000 0 1000 500">2</button>
        <button data-view="0 500 1000 500">3</button>
        <button data-view="1000 500 1000 500">4</button>
      </div>
      <button class="fullView" data-view="0 0 2000 1000">Wide</button>

    </div>
    <div id="colorControl">

      <p>Color Theme</p>
      <div class="colorSwatch"></div>
      <div class="colorSwatch"></div>
      <div class="colorSwatch"></div>
      <div class="colorSwatch"></div>
      <div class="colorSwatch"></div>
      <div class="colorSwatch"></div>
      <div class="colorSwatch"></div>
      <div class="colorSwatch"></div>

    </div>
  </div>
</div>
              
            
!

CSS

              
                body {
  padding: 0;
  margin: 0;
  font-family: "Roboto", sans-serif;
  background: #000;
  overflow: hidden;
  height: 100vh;
  color: white;
}

* {
  box-sizing: border-box;
}

#master,
#controls {
  position: absolute;
  left: 50%;
  overflow: hidden;
  opacity:0;
}

text {
  user-select: none;
  font-weight: 700;
}

.listener {
  cursor: pointer;
}

#buttonWrap {
  width: 88px;
  height: 130px;
  position: absolute;
  left: 30px;
  top: 45px;
}

#colorControl {
  position: absolute;
  left: 140px;
  top: 62px;
  width: 140px;
  text-align: center;
}

button {
  font-family: "Roboto", sans-serif;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}

p {
  margin: 0;
}

.zoomWrap button {
  width: 40px;
  height: 30px;
  margin: 2px;
  float: left;
}

button.fullView {
  width: 84px;
  height: 30px;
  margin: 2px;
  float: left;
}

.colorSwatch {
  width: 30px;
  height: 30px;
  background: white;
  border-radius: 100%;
  border: solid 2px white;
  float: left;
  margin: 2px;
  cursor: pointer;
}

#controls {
  position: relative;
  width: 300px;
  height: 174px;
  text-align: center;
}

h2 {
  color: #555;
  margin-top: 16px;
  font-size: 20px;
}

.globalFill {
  fill: #46a4cc;
}

.globalStroke {
  stroke: #46a4cc;
}

.transparent {
  fill: transparent;
}

#demo1 .globalStroke {
  fill: none;
}

#demo1 .globalFill {
  opacity: 0.25;
}

              
            
!

JS

              
                console.clear();

document.addEventListener("DOMContentLoaded", function(event) {
window.onload = function() {

var master = document.querySelector("#master");
var controls = document.querySelector("#controls");
var colorArray = [ "#46a4cc", "#94c356", "#eae047", "#e3aa59", "#a63ba0", "#cf5b21", "#7533b2", "#a90f45"];
var colorSwatches = document.querySelectorAll(".colorSwatch");
var masterData = master.getBBox();
var mw = masterData.width;
var mh = masterData.height;
var textPadding = 16;
var textSpacing = 20;
var fontSize = 20;
var titles = ["Home", "About Us", "Service Directory", "Photo Gallery", "Contact Us"];
var svgns = "http://www.w3.org/2000/svg";
var textElements = [];
var textWidths = [];
var starts = [];
var middles = [];
var original = document.querySelector("#textStuff");
var totalWidth = 0;

TweenMax.set([master, controls], {xPercent:-50});

// color changing controls

for (var i = 0; i < colorSwatches.length; i++) {
  TweenMax.set(colorSwatches[i], { backgroundColor: colorArray[i] });
  colorSwatches[i].index = i;
  colorSwatches[i].addEventListener("click", colorChange);
}

function colorChange() {
  TweenMax.to(".globalFill", 0.5, {fill:colorArray[this.index]});
  TweenMax.to(".globalStroke", 0.5, {stroke:colorArray[this.index]});
}



// simple loop to create the text elements
for (let i = 0; i < titles.length; i++) {
  var txt = document.createElementNS(svgns, "text");
  txt.setAttributeNS(null, "x", 0);
  txt.setAttributeNS(null, "y", 0);
  txt.setAttributeNS(null, "font-size", fontSize);
  txt.setAttributeNS(null, "fill", "#262626");
  txt.innerHTML = titles[i];
  original.appendChild(txt);
  textWidths.push(txt.getBBox().width);
  textElements.push(txt);
  totalWidth += textWidths[i] + textPadding * 2 + textSpacing;
}

totalWidth -=textSpacing; // last text element doesn't need a trailing space
var cv = (mw/2 - totalWidth)/2; // needed to center all the text elements
var yStart = mh/4 - textElements[0].getBBox().height/2 - textPadding;
var yEnd = textElements[0].getBBox().height + textPadding * 2;

// position the text and add a transparent rectangle over the top to act 
// as the mouse click event target -- adds a little padding to the text
for (let i = 0; i < titles.length; i++) {
  var start = i < 1  ? textPadding + cv : start + textWidths[i - 1] + textPadding * 2 + textSpacing;
  starts.push(start);
  middles.push(start + textWidths[i] / 2);
  TweenMax.set(textElements[i], {y: mh / 4 - textElements[i].getBBox().height / 2 - textElements[i].getBBox().y});
  TweenMax.set(textElements[i], { x: start });
  var newRect = document.createElementNS(svgns, "rect");
  newRect.setAttributeNS(null, "x", start - textPadding);
  newRect.setAttributeNS(null, "y", yStart);
  newRect.setAttributeNS(null, "width", textWidths[i] + textPadding * 2);
  newRect.setAttributeNS(null, "height", yEnd);
  newRect.setAttributeNS(null, "fill", "black");
  newRect.setAttributeNS(null, "opacity", 0);
  newRect.setAttributeNS(null, "class", "listener");
  original.appendChild(newRect);
}


// clone the text elements and listeners group for all demos
var groups = document.querySelectorAll(".demoGroup");
var bg = document.querySelectorAll(".bg");
for (let i = 1; i < groups.length; i++) {
 var newClone = original.cloneNode(true);
  groups[i].appendChild(newClone); 
}

// position demos on master SVG
TweenMax.set("#demo2", {x:mw/2});
TweenMax.set("#demo3", {y:mh/2});
TweenMax.set("#demo4", {x:mw/2, y:mh/2});

// viewBox zoom controls
var buttons = document.querySelectorAll("button");
for (let i = 0; i < buttons.length; i++) {
  buttons[i].index=i;
  buttons[i].addEventListener("click", zoomView);
}

function zoomView() {
  TweenMax.to("#master", 1, {attr:{viewBox:this.getAttribute('data-view')}, ease:Power3.easeInOut}); 
}

// *************************************************************************************************
// *************************************************************************************************
// Start Demo 1
var stalk = 40;
var d1Solids = [];
var d1Polys = [];
var d1Strokes = ["#444", "none", "#42a6e0"];
var d1Class = ["transparent", "globalFill", "globalStroke"];
var d1Widths = [1, 0, 6];
var d1OldTarget = 0;
var d1NewTarget = 0;
var d1Targets = document.querySelectorAll("#demo1 .listener");
var text1 = document.querySelectorAll("#demo1 text");
var d1Anim;
var d1Master;
TweenMax.set("#topLine", {attr:{x1:middles[0], x2:middles[titles.length-1], y1:yStart-stalk, y2:yStart-stalk}, stroke:d1Strokes[0], strokeWidth:d1Widths[0] });
TweenMax.set("#d1Target", {stroke:d1Strokes[2], strokeWidth:d1Widths[2] });
for (let i = 0; i < titles.length; i++) {
  // create the stalks that stretch from the line to teh square
  var line = document.createElementNS(svgns, "line");
  line.setAttribute("x1", middles[i]);
  line.setAttribute("y1", yStart - stalk);
  line.setAttribute("x2", middles[i]);
  line.setAttribute("y2", yStart);
  line.setAttribute("stroke", d1Strokes[0]);
  line.setAttribute("stroke-width", d1Widths[0]);
  bg[0].appendChild(line);
  // add listeners
  d1Targets[i].index = i;
  d1Targets[i].addEventListener("click", demo1CoolStuff);
}

// need 3 copies of the polyline, static outline, animating outline and solid
for (let j = 0; j < 3; j++) {
  for (let i = 0; i < titles.length; i++) {
    // create the stalks that stretch from the line to teh square
    var px1 = starts[i] - textPadding;
    var px2 = middles[i];
    var px3 = starts[i] + textWidths[i] + textPadding;
    var py1 = yStart;
    var py2 = yStart + yEnd;
    var polyPoints = px2 + " " + py2 + "," + px1 + " " + py2 + "," + px1 + " " + py1 + "," + px3 + " " + py1 + "," + px3 + " " + py2 + "," + px2 + " " + py2;
    var polyline = document.createElementNS(svgns, "polyline");
    polyline.setAttribute("points", polyPoints);
    polyline.setAttribute("class", d1Class[j]);
    bg[0].appendChild(polyline);
    if (j === 1) {d1Solids.push(polyline); }
    if (j === 2) {d1Polys.push(polyline);}
    
    TweenMax.set(polyline, {
      stroke: d1Strokes[j],
      strokeWidth: d1Widths[j],

    });
  }
}


TweenMax.set(d1Polys, {drawSVG:0, opacity:0});
TweenMax.set(d1Solids, {scaleY:0, transformOrigin:"center top"});
TweenMax.set(d1Polys[0], {drawSVG:true, opacity:1});
TweenMax.set(d1Solids[0], {scaleY:1});


function demo1CoolStuff() {
  d1NewTarget = this.index;
  if (d1OldTarget === d1NewTarget) {
    return;
  }
  if (d1Master && d1Master.isActive()) {
    d1Master.progress(1);
  }
  d1Master = new TimelineMax();
  var dur = 1;
  // reconfigure the animated polyline to go from the old to new target
  var tx1 = middles[d1OldTarget];
  var tx2 = middles[d1NewTarget];
  var ty1 = yStart;
  var ty2 = yStart-stalk;
  var polyPoints = tx1 + " " + ty1 + "," + tx1 + " " + ty2 + "," + tx2 + " " + ty2 + "," + tx2 + " " + ty1;
  TweenMax.set("#d1Target", {attr:{points:polyPoints}, drawSVG:0});
  
  d1Anim = new TimelineMax({paused:true});
  d1Anim.set("#d1Target", {opacity:1});
  d1Anim.add("start");
  d1Anim.to(d1Polys[d1OldTarget], dur, {drawSVG:"50% 50%"}, "start");
  d1Anim.to("#d1Target", dur, {drawSVG:true}, "start");
  d1Anim.to(d1Solids[d1OldTarget], dur, {scaleY:0, }, "start");
  d1Anim.set(d1Polys[d1OldTarget], {opacity:0});
  d1Anim.add("part2");
  d1Anim.set(d1Polys[d1NewTarget], {opacity:1});
  d1Anim.to("#d1Target", dur, {drawSVG:"100% 100%"},  "part2");
  d1Anim.to(d1Solids[d1NewTarget], dur, {scale:1}, "part2");
  d1Anim.fromTo(d1Polys[d1NewTarget], dur, { drawSVG: "50% 50%" }, { drawSVG: "0% 100%" }, "part2");
  d1Anim.set("#d1Target", {opacity:0});
  d1Master.to(d1Anim, 1, {progress:1, ease:Power3.easeInOut});
  
  d1OldTarget = d1NewTarget;
}
// End Demo 1
// *************************************************************************************************


// *************************************************************************************************
// Start Demo 2
var d2Targets = document.querySelectorAll("#demo2 .listener");
var d2OldTarget = 0;
var d2NewTarget = 0;
var d2Top = yStart;
var d2Bottom = yStart + yEnd;
var d2Target = document.querySelector("#d2Target");
var d2Anim;
var burstL = document.querySelector("#d2BurstLeft");
var burstR = document.querySelector("#d2BurstRight");
var burstLines = document.querySelectorAll("#burstLines line");
var text2 = document.querySelectorAll("#demo2 text");

for (let i = 0; i < titles.length; i++) {
  d2Targets[i].index = i;
  d2Targets[i].addEventListener("click", demo2CoolStuff);
}
TweenMax.set("#d2BottomLine", {
  attr: {
    x1: starts[0] - textPadding,
    x2: starts[0] + totalWidth - textPadding,
    y1: d2Bottom,
    y2: d2Bottom
  },
  strokeWidth: 6,
});

TweenMax.set(d2Target, {
  attr: {
    x: starts[0] - textPadding,
    width: textWidths[0] + textPadding * 2,
    y: d2Top,
    height: yEnd
  },
  strokeWidth: 4,
  stroke: "none",
});

TweenMax.set("#shadow", {
  attr: {
    x1: starts[0] - textPadding,
    x2: textWidths[0] + starts[0] + textPadding ,
    y1: yStart + yEnd,
    y2: yStart + yEnd
  }
});

TweenMax.set([burstL, burstR], {
  y: yStart - 35,
  drawSVG: 0,
  opacity: 0
});

TweenMax.set(text2[0], {fill:"#fff"});

function demo2CoolStuff() {
  d2NewTarget = this.index;
  if (d2OldTarget === d2NewTarget) {
    return;
  }
  if (d2Anim && d2Anim.isActive()) {
    d2Anim.progress(1);
  }

  var dur = 1;
  var burstDur = 0.24;
  var burstAnim = new TimelineMax();
 
  TweenMax.set(burstL, {x:starts[d2NewTarget] - 35 - textPadding, drawSVG:0, opacity:0});
  TweenMax.set(burstR, {x:starts[d2NewTarget] + textWidths[d2NewTarget] + textPadding + 5, drawSVG:0, opacity:0});
  
  burstAnim.set([burstL, burstR], {opacity:1, immediateRender:false});
  burstAnim.fromTo(burstLines, burstDur/3, {drawSVG:"0% 0%"}, {drawSVG:"0% 30%", ease:Linear.easeNone});
  burstAnim.to(burstLines, burstDur/2, {drawSVG:"70% 100%", ease:Linear.easeNone});
  burstAnim.to(burstLines, burstDur/3, {drawSVG:"100% 100%", ease:Power3.easeOut});
  
  d2Anim = new TimelineMax();
  d2Anim.to(d2Target, 0.35, {attr:{height:0, y:d2Bottom}, ease:Back.easeIn.config(2)});
  d2Anim.to(text2[d2OldTarget], 0.35, {fill:"#000"}, 0.15);
  d2Anim.set(d2Target,  {attr:{x:starts[d2NewTarget] - textPadding, width:textWidths[d2NewTarget] + textPadding*2}});
  d2Anim.add("part2");
  d2Anim.set("#shadow", {
  attr: {
    x1: starts[d2NewTarget] - textPadding,
    x2: textWidths[d2NewTarget] + starts[d2NewTarget] + textPadding ,
  }
});
  d2Anim.add(burstAnim, "part2+=0.15");
  d2Anim.to(d2Target, 0.35, {attr:{height:yEnd, y:yStart}, ease:Back.easeOut.config(1.5)}, "part2");
  d2Anim.to(text2[d2NewTarget], 0.35, {fill:"#fff"}, "part2");
  
  d2OldTarget = d2NewTarget;
}

// End Demo 2
// *************************************************************************************************


// *************************************************************************************************
// Start Demo 3

var d3Targets = document.querySelectorAll("#demo3 .listener");
var text3 = document.querySelectorAll("#demo3 text");
var d3Anim;
var d3Master;
var d3OldTarget = 0;
var d3NewTarget = 0;
var stretch;
var capsule = document.querySelector("#capsule");
for (let i = 0; i < titles.length; i++) {
  d3Targets[i].index = i;
  d3Targets[i].addEventListener("click", demo3CoolStuff);
}


TweenMax.set("#outline", {attr:{x:starts[0] - textPadding, width:totalWidth, y:yStart, height:yEnd, rx:yEnd/2}, strokeWidth:2, stroke:"#eee"});

TweenMax.set(capsule, {attr:{x:starts[0] - textPadding, width:textWidths[0] + textPadding*2, y:yStart, height:yEnd, rx:yEnd/2}});

TweenMax.set(text3[0], {fill:"#fff"});

function demo3CoolStuff() {
  d3NewTarget = this.index;
  if (d3OldTarget === d3NewTarget) {
    return;
  }
  if (d3Master && d3Master.isActive()) {
    d3Master.progress(1);
  }
  
  d3Anim = new TimelineMax({paused:true});
 d3Master = new TimelineMax(); 

if (d3NewTarget > d3OldTarget) {
  // left to right stretch
  stretch = starts[d3NewTarget] + textWidths[d3NewTarget] - starts[d3OldTarget] + textPadding*2;
  d3Anim.to(capsule, 2, {attr:{width:stretch}}, "start");
  
  d3Anim.to(capsule, 1, {attr:{x:starts[d3NewTarget] - textPadding, width:textWidths[d3NewTarget] + textPadding*2}}, "end") ;
} else {
  // right to left stretch
  stretch =  starts[d3OldTarget] + textWidths[d3OldTarget] + textPadding*2 - starts[d3NewTarget];
  d3Anim.to(capsule, 2, {attr:{width:stretch, x:starts[d3NewTarget] - textPadding}}, "start");
  d3Anim.to(capsule, 1, {attr:{width:textWidths[d3NewTarget]+textPadding*2}}, "end");
  
}
 

  d3Anim.to(text3[d3OldTarget], 0.5, { fill: "#000" }, 0);
  d3Anim.to(
    capsule,
    2,
    { scaleY: 0.5, transformOrigin: "center bottom" },
    "start"
  );
  d3Anim.to(capsule, 1, { scaleY: 1 }, "end");
  d3Anim.to(text3[d3NewTarget], 1, { fill: "#fff" }, "end");
  d3Master.to(d3Anim, 0.75, { progress: 1, ease: Power3.easeInOut });

  d3OldTarget = d3NewTarget;

}


// End Demo 3
// *************************************************************************


// *************************************************************************
// Start Demo 4

var d4Targets = document.querySelectorAll("#demo4 .listener");

var d4Anim;
var d4Master;
var d4OldTarget = 0;
var d4NewTarget = 0;
var text4 = document.querySelectorAll("#demo4 text");
var target4 = document.querySelector("#square4");
var tRolls = ["right bottom", "right top", "left top", "left bottom"];
var bRolls = ["left bottom", "left top", "right top", "right bottom"];
for (let i = 0; i < titles.length; i++) {
  d4Targets[i].index = i;
  d4Targets[i].addEventListener("click", demo4CoolStuff);
}
TweenMax.set("#rollLine", {
  attr: {
    x1: starts[0] - textPadding,
    x2: starts[0] + totalWidth - textPadding,
    y1: d2Bottom,
    y2: d2Bottom
  },


});
TweenMax.set(target4, {attr:{y:yStart, height:yEnd, x:starts[0] - textPadding, width: textWidths[0] + textPadding*2}});
TweenMax.set(text4[0], {fill:"#fff"});
function demo4CoolStuff() {

    d4NewTarget = this.index;
  if (d4OldTarget === d4NewTarget) {
    return;
  }
  if (d4Master && d4Master.isActive()) {
    d4Master.progress(1);
  }
  
  var rollStart = middles[d4OldTarget];
  var rollEnd = middles[d4NewTarget];
  var rollDistance = Math.abs(rollEnd - rollStart);
  var rolls = Math.round(rollDistance/yEnd);
  if(d4NewTarget > d4OldTarget) {
    turnPerc = "+=90";
    turnArray = tRolls;
  } else {
    turnPerc = "-=90";
    turnArray = bRolls;
  }
  d4Anim = new TimelineMax({paused:true});
  d4Master = new TimelineMax();

  
if(d4NewTarget > d4OldTarget) {
       d4Anim.to(target4,0.9,  {rotation:-45, transformOrigin:"left bottom"}); 
    } else {
      d4Anim.to(target4, 0.9,  {rotation:45, transformOrigin:"right bottom"});
    }
  d4Anim.to(target4, 0.25,  {rotation:0});
  
  
  for (let i = 0; i < rolls; i++) {
    d4Anim.to(target4, 1, {rotation:turnPerc, transformOrigin:turnArray[i % 4]});
  }
  
  d4Anim.set(target4, {clearProps:"x"});
  
  if (d4NewTarget > d4OldTarget) {
    d4Anim.set(target4, {
      attr: { x: yEnd * rolls + (middles[d4OldTarget] - yEnd / 2) }
    });
  } else {
    d4Anim.set(target4, {
      attr: { x: middles[d4OldTarget] - yEnd * rolls - yEnd / 2 }
    });
  }

  
  d4Anim.to(target4, 1, {
    attr: {
      x: starts[d4NewTarget] - textPadding,
      width: textWidths[d4NewTarget] + textPadding * 2
    },
    ease: Back.easeInOut.config(3)
  });

  
  d4Master.to(text4[d4OldTarget], 0.35, {fill:"#000"}, 0);
  d4Master.to(target4, 0.35, {attr:{x:middles[d4OldTarget] - yEnd/2, width:yEnd}, ease:Back.easeInOut}, 0);
  d4Master.to(d4Anim, 2, {progress:1, ease:Power2.easeInOut});
  d4Master.to(text4[d4NewTarget], 0.25, {fill:"#fff"}, "-=0.45");

  d4OldTarget = d4NewTarget;
}
// End Demo 4
// ---------------------------------------------------------------



/* ---------------------------------------------------------------
	 Correctly size/resize and position the SVG and control panel
	---------------------------------------------------------------*/

function newSize() {
  var h = window.innerHeight;
  var w = window.innerWidth - 20;
  if (w > (h - 200) * 2) {
    TweenMax.set(master, { y: 10, height: h - 200, width: (h - 200) * 2 });
    TweenMax.set(controls, { y: h - 190 });
  } else {
    TweenMax.set(master, { y: 10, width: Math.ceil(w / 2) * 2, height: w / 2 });
    TweenMax.set(controls, { y: w / 2 + 10 });
  }
}

newSize();
window.addEventListener("resize", newSize);

TweenMax.set([controls, master], { opacity:1 });
    }; 
});


              
            
!
999px

Console