JS codepen in Webflow

Design help Custom code
1

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

2

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).

3

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

4

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>

1 Like
5

Thanks! I will have a look.

6

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

7

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).