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

              
                <body>
  <h1>Yo waddap this is just a demo, look at me.</h1>
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="360px" height="360px" viewBox="0 0 360 360" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Group</title>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Desktop-HD-Copy" transform="translate(-905.000000, -499.000000)" stroke="#CA0C0C" stroke-width="6">
            <g id="Group" transform="translate(908.011317, 501.650133)">
                <path d="M292.988683,123.349867 C338.988683,52.3498673 44.9886834,63.3498673 10.9886834,105.349867 C-23.0113166,147.349867 30.9886834,205.349867 71.9886834,234.349867 C112.988683,263.349867 213.988683,256.349867 287.988683,217.349867 C361.988683,178.349867 289.988683,75.3498673 228.988683,42.3498673 C167.988683,9.34986732 97.9886834,-38.6501327 119.988683,56.3498673 C141.988683,151.349867 -17.0113166,242.349867 53.9886834,251.349867 C124.988683,260.349867 278.988683,204.349867 337.988683,123.349867 C396.988683,42.3498673 94.9886834,59.3498673 71.9886834,105.349867 C48.9886834,151.349867 127.988683,178.349867 185.988683,199.349867 C243.988683,220.349867 297.988683,196.349867 314.988683,178.349867 C331.988683,160.349867 302.988683,188.349867 252.988683,171.349867 C202.988683,154.349867 104.988683,3.34986732 61.9886834,42.3498673 C18.9886834,81.3498673 73.9886834,166.349867 87.9886834,199.349867 C101.988683,232.349867 163.988683,311.349867 228.988683,303.349867 C272.322017,298.016534 300.988683,279.016534 314.988683,246.349867" id="Path-6"></path>
            </g>
        </g>
    </g>
</svg>
</body>

              
            
!

CSS

              
                body
  background-color: black
  height: 400vh
  
  h1
    font-weight: 900
    font-size: 4rem
    font-family: 'Helvetica Neue'
    color: white
    max-width: 56vw
    line-height: 1em

    position: fixed
    top: 20vh
    left: 10vw
  
  svg
    position: fixed
    top: 20vh
    right: 10vw
    pointer-events: none
              
            
!

JS

              
                const morphAn = anime({
  targets: 'svg #Path-6',
  d: [
    { value: [
      'M292.988683,123.349867 C338.988683,52.3498673 44.9886834,63.3498673 10.9886834,105.349867 C-23.0113166,147.349867 30.9886834,205.349867 71.9886834,234.349867 C112.988683,263.349867 213.988683,256.349867 287.988683,217.349867 C361.988683,178.349867 289.988683,75.3498673 228.988683,42.3498673 C167.988683,9.34986732 97.9886834,-38.6501327 119.988683,56.3498673 C141.988683,151.349867 -17.0113166,242.349867 53.9886834,251.349867 C124.988683,260.349867 278.988683,204.349867 337.988683,123.349867 C396.988683,42.3498673 94.9886834,59.3498673 71.9886834,105.349867 C48.9886834,151.349867 127.988683,178.349867 185.988683,199.349867 C243.988683,220.349867 297.988683,196.349867 314.988683,178.349867 C331.988683,160.349867 302.988683,188.349867 252.988683,171.349867 C202.988683,154.349867 104.988683,3.34986732 61.9886834,42.3498673 C18.9886834,81.3498673 73.9886834,166.349867 87.9886834,199.349867 C101.988683,232.349867 163.988683,311.349867 228.988683,303.349867 C272.322017,298.016534 300.988683,279.016534 314.988683,246.349867', 'M270.988683,42.3498673 C133.988683,-63.6501327 25.9886834,77.3498673 20.9886834,137.349867 C15.9886834,197.349867 66.9886834,263.349867 107.988683,292.349867 C148.988683,321.349867 281.988683,290.349867 308.988683,224.349867 C335.988683,158.349867 296.988683,54.3498673 235.988683,21.3498673 C174.988683,-11.6501327 82.9886834,1.34986732 34.9886834,86.3498673 C-13.0113166,171.349867 76.9886834,299.349867 156.988683,299.349867 C236.988683,299.349867 391.988683,224.349867 297.988683,77.3498673 C203.988683,-69.6501327 20.9886834,69.3498673 20.9886834,131.349867 C20.9886834,193.349867 56.9886834,299.349867 179.988683,299.349867 C302.988683,299.349867 313.988683,213.349867 318.988683,166.349867 C323.988683,119.349867 313.988683,86.3498673 270.988683,42.3498673 C227.988683,-1.65013268 104.988683,3.34986732 61.9886834,42.3498673 C18.9886834,81.3498673 25.9886834,191.349867 39.9886834,224.349867 C53.9886834,257.349867 138.988683,307.349867 203.988683,299.349867 C247.322017,294.016534 278.65535,272.349867 297.988683,234.349867']},{ value: ['M11.9886834,13.3498673 C6.98868339,91.3498673 -3.01131661,295.349867 11.9886834,313.349867 C26.9886834,331.349867 317.988683,333.349867 336.988683,317.349867 C355.988683,301.349867 348.988683,27.3498673 336.988683,13.3498673 C324.988683,-0.650132682 26.9886834,-5.65013268 9.98868339,13.3498673 C-7.01131661,32.3498673 5.98868339,302.349867 11.9886834,317.349867 C17.9886834,332.349867 320.988683,336.349867 336.988683,317.349867 C352.988683,298.349867 361.988683,38.3498673 336.988683,13.3498673 C311.988683,-11.6501327 19.9886834,5.34986732 11.9886834,13.3498673 C3.98868339,21.3498673 -4.01131661,291.349867 9.98868339,313.349867 C23.9886834,335.349867 322.988683,334.349867 336.988683,313.349867 C350.988683,292.349867 336.988683,33.3498673 336.988683,13.3498673 C336.988683,-6.65013268 20.9886834,13.3498673 11.9886834,13.3498673 C2.98868339,13.3498673 -0.0113166127,301.349867 9.98868339,317.349867 C19.9886834,333.349867 97.9886834,317.349867 165.988683,317.349867 C211.322017,317.349867 268.322017,317.349867 336.988683,317.349867']}
  ]
 ,
  easing: 'linear',
  duration: 2000,
  autoplay: false
})


function getScrollPercent() {
  const scrollTop = window.scrollY;
  const docHeight = document.body.offsetHeight;
  const winHeight = window.innerHeight;
  const scrollPercent = ((scrollTop) / (docHeight - winHeight)) * 100;

  return scrollPercent; 
}

const title = document.querySelector('h1')

document.addEventListener('scroll', () => {
  const sp = getScrollPercent()

  morphAn.seek((sp / 100) * morphAn.duration);
  
  if (sp < 35) title.innerHTML = 'Yo waddap this is just a demo, look at me.'
  if (sp > 35 && 65 > sp) title.innerHTML = 'We make sense out of chaos.'
  if (sp > 65 && 95 > sp) title.innerHTML = 'And then use that sense to create systems.'
  if (sp > 95) title.innerHTML = 'Call us... inside the box'
})
              
            
!
999px

Console