font-kerning not helping...

[helloganiel]

Hello,

I've tried applying the font-kerning fix for letter spacing and nothing helped. Can someone help me with this please?

Experiencing this problem on this site: https://madebyblank.webflow.io/studio

Thanks!

[lukePeavey]

Hey I'd be happy to take a look at this...

Are you seeing a visible change in character spacing after the text is rendered?

[lukePeavey]

Do you want me to reopen this?

[helloganiel]

Hello Luke, after reloading the page you can already see the change. Yes, it is quite visible, see this: https://streamable.com/atv8lo

[lukePeavey]

Can you share the source code for this page? The text is split into lines, and the whole paragraph is wrapped as a single line element. This is usually a sign that split type is being called before the layout has rendered.

Are you using a react or something similar ?

[helloganiel]

No I am not using react, just webflow with codesandbox linked in.

Here you can preview my webflow site:

https://preview.webflow.com/preview/madebyblank?utm_medium=preview_link&utm_source=designer&utm_content=madebyblank&preview=f8e76df79c2cefaef02b3dde9996a0ce&pageId=62f39c2beafac58c606400d5&workflow=preview

and here is the code for splitting and animating with gsap:

let typeSplit = new SplitType("[text-split]", {
  types: "words, lines, chars",
  tagName: "span"
});

// Link timelines to scroll position
function createScrollTrigger(triggerElement, timeline) {
  // Play tl when scrolled into view (60% from top of screen)
  ScrollTrigger.create({
    trigger: triggerElement,
    start: "top 80%",
    onEnter: () => timeline.play()
  });
}

$("[words-slide-up]").each(function (index) {
  let tl = gsap.timeline({ paused: true });
  tl.from($(this).find(".word"), {
    rotation: 7,
    autoAlpha: 0,
    yPercent: 50,
    duration: 0.6,
    ease: "Expo.easeOut",
    stagger: { each: 0.066 }
  });
  createScrollTrigger($(this), tl);
});

[lukePeavey]

This issue is most likely related to using SplitType within WebFlow.

Unfortunately i'm not really familiar with WebFlow. But you need to ensure that SplitType is executed after the page content is fully rendered. If WebFlow is applying dynamic styles to the content at run time, you would need to make sure that SplitType executes after those styles have been applied.

A few things you could try for debugging...

• Remove all the animation code from your javascript, and just include the calls to splitType. See if the text is split into the correct html structure without a visible change.
• Try wrapping your javascript in a setTimeout with a of a delay of few seconds.
• Try wrapping your javascript in an event listener on window "load"
• try disabling any other animations or transitions on the page

[helloganiel]

Thanks, I'll try everything, but the split type in the chars is moving the kerning, even if I fix the issue when loading after the content is fully rendered, doesn't it still look "bad"(kerning)?

[lukePeavey]

Yeah, I see what you mean. I'll take another look.

[lukePeavey]

I'm going to close this. Sorry I wasn't able to resolve this.