123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <section class="divi-2-7--section divi-2-7--section--featured">
  <a class="divi-2-7--play-button" href="#">
    <svg width="42" height="53" viewBox="0 0 42 53" xmlns="http://www.w3.org/2000/svg"><title>Triangle</title><path d="M1.694 52.283C.758 52.873 0 52.465 0 51.36V1.564C0 .462.756.048 1.694.64L40.84 25.39c.934.592.936 1.55 0 2.142L1.693 52.282z" fill="#FFF" fill-rule="evenodd"/></svg>
  </a>
  <iframe src="//www.youtube.com/embed/RFMfS3TTRQE?rel=0&amp;color=white&amp;controls=1&amp;showinfo=0" frameborder="0" allowfullscreen="" class="divi-2-7--featured-video"></iframe>
  <div class="divi-2-7--graph">
    <svg id="graph" width="2560" height="712" viewBox="0 0 2560 712" xmlns="http://www.w3.org/2000/svg">
      <title>Graph SVG</title>
      <defs>
          <radialGradient cx="0%" cy="0%" fx="0%" fy="0%" r="127.497%" id="a">
              <stop stop-color="#3B4B5B" offset="0%"/>
              <stop stop-color="#1F2934" offset="100%"/>
          </radialGradient>
          <linearGradient x1="50%" y1="-16.101%" x2="50%" y2="100%" id="b">
              <stop stop-color="#1D1D26" stop-opacity="0" offset="0%"/>
              <stop stop-color="#FFF" stop-opacity=".6" offset="50.208%"/>
              <stop stop-color="#FFF" stop-opacity="0" offset="100%"/>
          </linearGradient>
      </defs>
      <g fill="none" fill-rule="evenodd">
          <path d="M0 0h2560v418H0V0z" fill="url(#a)"/>
          <text fill="#FFF" opacity=".4" font-family="Helvetica" font-weight="300" font-size="16">
              <tspan x="1457.852" y="35" fill="#FFF">70</tspan>
          </text>
          <text fill="#FFF" opacity=".4" font-family="Helvetica" font-weight="300" font-size="16">
              <tspan x="1565.852" y="35" fill="#FFF">75</tspan>
          </text>
          <text fill="#FFF" opacity=".4" font-family="Helvetica" font-weight="300" font-size="16">
              <tspan x="1671.852" y="35" fill="#FFF">80</tspan>
          </text>
          <text fill="#FFF" opacity=".4" font-family="Helvetica" font-weight="300" font-size="16">
              <tspan x="1779.954" y="35" fill="#FFF">85</tspan>
          </text>
          <text fill="#FFF" opacity=".4" font-family="Helvetica" font-weight="300" font-size="16">
              <tspan x="1883.954" y="35" fill="#FFF">90</tspan>
          </text>
          <text fill="#FFF" opacity=".4" font-family="Helvetica" font-weight="300" font-size="16">
              <tspan x="1992.954" y="35" fill="#FFF">95</tspan>
          </text>
          <text fill="#FFF" opacity=".4" font-family="Helvetica" font-weight="300" font-size="16">
              <tspan x="2094.504" y="35" fill="#FFF">100</tspan>
          </text>
          <text fill="#FFF" opacity=".4" font-family="Helvetica" font-weight="300" font-size="16">
              <tspan x="2204.004" y="35" fill="#FFF">105</tspan>
          </text>
          <text fill="#FFF" opacity=".4" font-family="Helvetica" font-weight="300" font-size="16">
              <tspan x="2310.594" y="35" fill="#FFF">110</tspan>
          </text>
          <text fill="#FFF" opacity=".4" font-family="Helvetica" font-weight="300" font-size="16">
              <tspan x="2416.094" y="35" fill="#FFF">115</tspan>
          </text>
          <text fill="#FFF" opacity=".4" font-family="Helvetica" font-weight="300" font-size="16">
              <tspan x="2526.004" y="35" fill="#FFF">120</tspan>
          </text>
          <text fill="#FFF" opacity=".4" font-family="Helvetica" font-weight="300" font-size="16">
              <tspan x="1349.852" y="35" fill="#FFF">65</tspan>
          </text>
          <text fill="#FFF" opacity=".4" font-family="Helvetica" font-weight="300" font-size="16">
              <tspan x="1243.852" y="35" fill="#FFF">60</tspan>
          </text>
          <text fill="#FFF" opacity=".4" font-family="Helvetica" font-weight="300" font-size="16">
              <tspan x="1137.852" y="35" fill="#FFF">55</tspan>
          </text>
          <text fill="#FFF" opacity=".4" font-family="Helvetica" font-weight="300" font-size="16">
              <tspan x="1031.852" y="35" fill="#FFF">50</tspan>
          </text>
          <text fill="#FFF" opacity=".4" font-family="Helvetica" font-weight="300" font-size="16">
              <tspan x="925.852" y="35" fill="#FFF">45</tspan>
          </text>
          <text fill="#FFF" opacity=".4" font-family="Helvetica" font-weight="300" font-size="16">
              <tspan x="818.852" y="35" fill="#FFF">40</tspan>
          </text>
          <text fill="#FFF" opacity=".4" font-family="Helvetica" font-weight="300" font-size="16">
              <tspan x="708.852" y="35" fill="#FFF">35</tspan>
          </text>
          <text fill="#FFF" opacity=".4" font-family="Helvetica" font-weight="300" font-size="16">
              <tspan x="600.852" y="35" fill="#FFF">30</tspan>
          </text>
          <text fill="#FFF" opacity=".4" font-family="Helvetica" font-weight="300" font-size="16">
              <tspan x="494.852" y="35" fill="#FFF">25</tspan>
          </text>
          <text fill="#FFF" opacity=".4" font-family="Helvetica" font-weight="300" font-size="16">
              <tspan x="388.852" y="35" fill="#FFF">20</tspan>
          </text>
          <text fill="#FFF" opacity=".4" font-family="Helvetica" font-weight="300" font-size="16">
              <tspan x="282.852" y="35" fill="#FFF">15</tspan>
          </text>
          <text fill="#FFF" opacity=".4" font-family="Helvetica" font-weight="300" font-size="16">
              <tspan x="176.852" y="35" fill="#FFF">10</tspan>
          </text>
          <text fill="#FFF" opacity=".4" font-family="Helvetica" font-weight="300" font-size="16">
              <tspan x="74.426" y="35" fill="#FFF">5</tspan>
          </text>
          <path d="M773 0v712M666 0v712M559 0v712M880 0v712M1094 0v712M987 0v712M1201 0v712M1415 0v712M1522 0v712M1629 0v712M1736 0v712M1843 0v712M1950 0v712M2057 0v712M2164 0v712M2271 0v712M2378 0v712M2485 0v712M2592 0v712M1308 0v712M452 0v712M345 0v712M238 0v712M131 0v712M24 0v712" stroke="url(#b)" stroke-width="2" opacity=".4"/>
      </g>
    </svg>
    <svg id="lines" width="2560" height="712" viewBox="0 0 2560 712" xmlns="http://www.w3.org/2000/svg">
      <title>Graph Lines SVG</title>
      <g stroke-width="4" fill="none" fill-rule="evenodd">
          <path id="lineOne" d="M-100 290.505S-84 421.38 23 421.38s214-123.895 321-123.895 214 67.376 321 67.376 214-80.74 321-80.74 214 51.13 321 51.13 195-139.068 321-139.068 214 168.68 321 168.68 214-225.087 321-225.087 214 116.768 321 116.768" stroke="#2C8ED8"/>
          <circle id="circleOne" stroke="#2C8ED8" fill="#27323F" cx="1307" cy="335" r="7"/>

          <path id="lineTwo" d="M-100 290.505s16 83.115 123 83.115 214-120.707 321-120.707 214 62.37 321 62.37 214-113.15 321-113.15S1200 264 1307 264s195-129.564 321-129.564 214 163.757 321 163.757 214-102.638 321-102.638 214 119.727 321 119.727" stroke="#DC552B"/>
          <circle id="circleTwo" stroke="#DC552B" fill="#27323F" cx="986" cy="202" r="7"/>

          <path id="lineThree" d="M-100 368.56s16-57.536 123-57.536 214 57.536 321 57.536 214-116.123 321-116.123 214 58.587 321 58.587 214-95 321-95 195 109.758 321 109.758 214-148.88 321-148.88 214 119.887 321 119.887 214-166.21 321-166.21" stroke="#6048B7"/>
          <circle id="circleThree" stroke="#6048B7" fill="#27323F" cx="344" cy="368" r="7"/>

          <path id="lineFour" d="M-100 290.505s16-43.72 123-43.72 214 137.66 321 137.66 214-133.578 321-133.578 214 133.578 321 133.578 214-145.343 321-145.343 195 156.52 321 156.52c107 0 215.132-206.605 321-206.556 105.868.05 216.247 101.44 321 101.44 107 0 241.283-143.827 349.416-143.827" stroke="#2C8ED8"/>
          <circle id="circleFour" stroke="#2C8ED8" fill="#27323F" cx="1307" cy="237" r="7"/>

          <path id="lineFive" d="M-100 217.917s16 153.705 123 153.705 214 69.518 321 69.518 214-239.008 321-239.008 214 113.15 321 113.15 214-113.15 321-113.15 195 94.458 321 94.458 214-78.673 321-78.673 214 109.168 321 109.168 214-109.168 321-109.168" stroke="#DC552B"/>
          <circle id="circleFive" stroke="#DC552B" fill="#27323F" cx="986" cy="314" r="7"/>

          <path id="lineSix" d="M-100 206.505s16 142.862 123 142.862 214-182.94 321-182.94 214 220.22 321 220.22 214-151.186 321-151.186 214 160.177 321 160.177 195-253.044 321-253.044 214 142.696 321 142.696 214-91.066 321-91.066 183 155.143 290 155.143" stroke="#6048B7"/>
          <circle id="circleSix" stroke="#6048B7" fill="#27323F" cx="344" cy="166" r="7"/>
      </g>
    </svg>
  </div>
</section>
            
          
!
            
              // Base
$white: #FFFFFF;
$black: #000000;

.divi-2-7--section {
  &--featured {
    position: relative;
    background: linear-gradient(#303D4B, #242F3B);
    height: 420px;

    .divi-2-7 {
      &--graph {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1024px;
        overflow: hidden;
      }

      &--play-button {
        z-index: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        background: #3A4959;
        width: 120px;
        height: 120px;
        border-radius: 100%;
        box-shadow: 0 0 20px rgba($black, 0.2);
        transform: translate(-50%, -50%);
        animation: ripple 0.6s linear infinite;
        cursor: pointer;
        transition: background 0.3s ease;

        @keyframes ripple {
          0% {
            box-shadow: 0 0 0 0 rgba($black, 0.05), 0 0 0 20px rgba($black, 0.05), 0 0 0 40px rgba($black, 0.05);
          }

          100% {
            box-shadow: 0 0 0 20px rgba($black, 0.05), 0 0 0 40px rgba($black, 0.05), 0 0 0 60px rgba($black, 0);
          }
        }

        &:hover {
          background: lighten(#3A4959, 5%);
        }

        &--active {
          // width: 676px;
          // height: 380px;
          // border-radius: 4px;
          animation: none;

          svg {
            opacity: 0;
          }
        }

        svg {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-35%, -50%);
        }
      }

      &--featured-video {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 676px;
        height: 380px;
        transform: translate(-50%, -50%);
        transition: 0.3s 0.3s ease;
        opacity: 0;

        &--active {
          z-index: 1;
          opacity: 1;
        }
      }
    }

    #graph,
    #lines {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);

      // transition: 0.6s linear;

    }

    #graph {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    #lineFour,
    #lineFive,
    #lineSix,
    #circleFour,
    #circleFive,
    #circleSix {
      display: none;
    }
  }
}

body {
  background: #283441
}
            
          
!
            
              var easing = Back.easeInOut;

var lineArray = ['lineOne', 'lineTwo', 'lineThree', 'lineFour', 'lineFive', 'lineSix'];

var lines = {};

var lineAnimate = function(from, to) {
  return lines[from].tl.to(lines[from].el, 2, {
    morphSVG: to,
    ease: easing,
    yoyo: true
  }, "+=1");
}

for (var i = 0; i < lineArray.length; i++) {
  var line = lineArray[i];
  var lineMatch = lineArray[i + 3];

  lines[line] = {
    el: document.getElementById(line),
    tl: new TimelineMax({
      repeat: -1,
      yoyo: true
    })
  }

  if (i < 3) {
    lineAnimate(line, "#" + lineMatch);
  }
}

var circleArray = ['circleOne', 'circleTwo', 'circleThree', 'circleFour', 'circleFive', 'circleSix'];

var circles = {};

var circleAnimate = function(from, to) {
  return circles[from].tl.to(circles[from].el, 2, {
    morphSVG: to,
    ease: easing,
    yoyo: true
  }, "+=1");
}

for (var i = 0; i < circleArray.length; i++) {
  var circle = circleArray[i];
  var circleMatch = circleArray[i + 3];

  circles[circle] = {
    el: MorphSVGPlugin.convertToPath(document.getElementById(circle)),
    tl: new TimelineMax({
      repeat: -1,
      yoyo: true
    })
  }

  if (i < 3) {
    circleAnimate(circle, "#" + circleMatch);
  }
}

$('.divi-2-7--section--featured').css('margin-left', 0);
$('.divi-2-7--section--featured').on('mousemove', function(e) {

  var posX = Math.ceil((e.pageX - $(this).offset().left)),
    gethalf = $(this).width() / 2,
    animateEl = $('#graph, #lines');

  if (posX < gethalf) {
    TweenMax.to(animateEl, 0.6, {
      marginLeft: (posX / 10 * -1) + 72,
      ease: Linear.easeNone
    });

    // $('#graph').css('margin-left', (posX / 10 * -1) + 72);
    // $('#lines').css('margin-left', (posX / 10 * -1) + 72);
  }

  if (posX > gethalf) {

    TweenMax.to(animateEl, 0.6, {
      marginLeft: ((gethalf + (posX - gethalf)) / 10 * -1) + 72,
      ease: Linear.easeNone
    });

    // $('#graph').css('margin-left', ((gethalf + (posX - gethalf)) / 10 * -1) + 72);
    // $('#lines').css('margin-left', ((gethalf + (posX - gethalf)) / 10 * -1) + 72);
  }
});

$('.divi-2-7--play-button').on('click', function(e) {
  e.preventDefault();

  $(this).addClass('divi-2-7--play-button--active');

  var videoEl = $('.divi-2-7--featured-video');

  TweenMax.to($(this), 0.3, {
    height: 380,
    width: 676,
    borderRadius: 4,
    ease: Back.easeOut
  });

  $('.divi-2-7--featured-video').addClass('divi-2-7--featured-video--active');
  $(".divi-2-7--featured-video")[0].src += "&autoplay=1";
  $(this).unbind("click");
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console