Code

Split Text into Lines

Easily split text into lines based on lines, words, characters on your Webflow site. A great way to add interactions based on your own specifications to text on your Webflow site.

Open the demo

Easily split text into lines based on lines, words, characters on your Webflow site. A great way to add interactions based on your own specifications to text on your Webflow site.

How to add it

Add the Javascript to the closing body custom code settings
Update the JavaScript code based on your own requirements

The code

Javascript

                      <!-- Add to body close section -->
<script src="https://unpkg.com/split-type"></script>
<script>
let typeSplit;
// Split the text up
function runSplit() {
  typeSplit = new SplitType(".split-lines", {
    types: "lines, words"
  });
}
runSplit();
// Update on window resize
let windowWidth = $(window).innerWidth();
window.addEventListener("resize", function () {
  if (windowWidth !== $(window).innerWidth()) {
    windowWidth = $(window).innerWidth();
    typeSplit.revert();
    runSplit();
  }
});
</script>