JS codepen in Webflow

Hi There!

I was wondering if anyone could help me figure this out;

Is it possible to have this codepen work in webflow

See the Pen Line by wvano (@wvano) on CodePen.

So far I’ve tried using an html embed element but couldn’t get the draw on scroll to work.

Would really appreciate it if someone could help me

Before body - copy-paste js (wrap with script tag):

<script>
// Get a reference to the <path>
var path = document.querySelector('#path');

// Get length of path... ~577px in this case
var pathLength = path.getTotalLength();

// Make very long dashes (the length of the path itself)
path.style.strokeDasharray = pathLength + ' ' + pathLength;

// Offset the dashes so the it appears hidden entirely
path.style.strokeDashoffset = pathLength;

// Jake Archibald says so
// https://jakearchibald.com/2013/animated-line-drawing-svg/
path.getBoundingClientRect();

// When the page scrolls...
window.addEventListener("scroll", function(e) {
 
  // What % down is it? 
  // https://stackoverflow.com/questions/2387136/cross-browser-method-to-determine-vertical-scroll-percentage-in-javascript/2387222#2387222
  // Had to try three or four differnet methods here. Kind of a cross-browser nightmare.
  var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
    
  // Length to offset the dashes
  var drawLength = pathLength * scrollPercentage;
  
  // Draw in reverse
  path.style.strokeDashoffset = pathLength - drawLength;
    
  // When complete, remove the dash array, otherwise shape isn't quite sharp
 // Accounts for fuzzy math
  if (scrollPercentage >= 0.99) {
    path.style.strokeDasharray = "none";
    
  } else {
    path.style.strokeDasharray = pathLength + ' ' + pathLength;
  }
  
});
</script>

Under webflow tree add this as embed html


<svg version="1.1" id="Laag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1440 900" id="path">

	<path fill="none" stroke="black" stroke-width="2" id="path" d="M208,0v263.5c0,82.84,67.16,150,150,150l446,0h201.5c82.84,0,150,67.16,150,150l0,336.5"/>

</svg>

Works fine but keep in mind this is not so modular code.
Also for me this code not working inside webflow container (Hard to know why).

Thanks for the quick response! And it works! but as you said not inside containers or even when I add other elements it stops working. Really weird

I guess its related to code to calculate scrollPercentage.

Maybe try this library (Again more modular, more options, features, support):

Webflow tree

<div class="wrapper">
  <svg version="1.1" id="Laag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1440 900" id="path">
	<path fill="none" stroke="black" stroke-width="2" id="path" d="M208,0v263.5c0,82.84,67.16,150,150,150l446,0h201.5c82.84,0,150,67.16,150,150l0,336.5"/>
</svg>
</div>

Before body

<script src="https://cdn.jsdelivr.net/jquery.drawsvg/1/jquery.drawsvg.min.js"></script>
<script>
var $doc = $(document),
    $win = $(window),
    $svg = $('svg').drawsvg(),
    max = $doc.height() - $win.height();

$win.on('scroll', function() {
  var p = $win.scrollTop() / max;
  $svg.drawsvg('progress', p);
});
</script>

https://codepen.io/ezra_siton/pen/KjqwKR

1 Like

Thanks! I will have a look.

Thank you so much! its works! Now I have one more question if you wouldn’t mind. Say my viewheight = 100vh how would I make it so it ends on 100vh because It doesn’t atm

Great :slight_smile: Please mark as solution to close this topic.

SVG size not related to the scroll animation (Create 100px height svg or 900px).

Read this article about SVG scale:

Also read about this idea under https://stackoverflow.com (Search terms like “svg height” “svg 100vh” and so on).