SplitType not including some spaces

[wtem-design]

Hi

I'm splitting texts into words, and some spaces are lost in the process but not all. If you open the menu in https://immosolid-staging-cd58a2c892d12f4668483.webflow.io/ 'Aktuelle Angebote' has a missing space, and the smaller links ('Informationen für Eigentümer') have the first space present but the second missing. If I revert splitType, spaces come back. For testing, I tried to split h1 on the same page and had no issue with the spaces. I animate with gsap.

[lukePeavey]

Could you include the relevant source code for the menu component where this issue is occurring (or link to the source code for the project if it's on GitHub).

what other libraries / frameworks / are use using?

[wtem-design]

document.addEventListener("DOMContentLoaded", () => {

  let menuButton = document.querySelector('.navbar_hamburger-button');
  const menuLinks = SplitType.create('.navbar_hamburger-primary-link, .navbar_hamburger-secondary-link', { types: 'words' });

  let openNavbar = gsap.timeline({
    paused: true,
    reversed: true,
    defaults: {
      duration: 1.5,
      ease: "expo.inOut"
    }
  });

  openNavbar.set('.navbar_hamburger-menu', { display: 'grid' })
            .set('body', { overflow:'hidden' })
            .fromTo('.navbar_hamburger-menu-image', { xPercent: 30, scale: 1.3, opacity: 0 }, { xPercent: 0, scale: 1, opacity: 1})
            .fromTo('.navbar_hamburger-menu-links-background', { width: 0 }, { width: 'auto' }, '<')
            .fromTo('.navbar_hamburger-menu-kontakt-background', { width: '0%' }, { width: '100%' }, '<')
            .from( menuLinks.words, { opacity: 0, yPercent: 100, stagger: { amount: 0.2 } }, '<');

  menuButton.addEventListener('click', function () {
    openNavbar.reversed() ? openNavbar.play() : openNavbar.reverse();
  });

});

Besides splittype and gsap (base + scrolltrigger) only library uploaded to the page is splide. I use splittype on my h1 and h2 across the site without the described problem, under different URL: https://immosolid-staging.webflow.io/, in there the menu links look fine, but it's because added margin to the spans.

[lukePeavey]

Thanks. I will take a look at this today

[lukePeavey]

Have you try removing any animations /transitions that are applied to those elements and just splitting the text?

[wtem-design]

Well now secondary links have all spaces, but primary link still does not. All have been split into words.

[lukePeavey]

Did you try remove any animations / styles that are applied to those elements ?

[lukePeavey]

Also, try splitting into words and characters, see if that makes a difference

[wtem-design]

The whole js I've written for this page looks now like this:

<script src="https://unpkg.com/split-type"></script> <script> document.addEventListener("DOMContentLoaded", () => { const menuLinks = SplitType.create('.navbar_hamburger-primary-link, .navbar_hamburger-secondary-link', { types: 'words, chars' }); }); </script>

Split into characters as well, but it still looks as on the screen.

[lukePeavey]

You could try creating a codepen or codeSandbox, using the same html structure as the menu on your site, the same css, animations, and JavaScript, to see if this issue can be reproduced outside of WebFlow.

• You could try putting a non breaking space between the words.

• you might take a look at the styles that webflow is applying to the split words elements in the menu (ie character spacing, white space) I don't really know how web flow Works, but if you can try to remove any styling from the menu items (just to see if that is causing the issue)

• Also if you are using a web font that has to be loaded, trying setting font family to system fonts

[wtem-design]

Okay found it – splitted text of links had display:flex set. Without it splitting works perfect.

Thanks for your time and the plugin!

Ah! I'm glad you figured it out!