font-kerning not helping... about splittype HOT 9 CLOSED

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

from splittype.

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?

from splittype.

Do you want me to reopen this?

from splittype.

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

from splittype.

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 ?

from splittype.

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);
});

from splittype.

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

from splittype.

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

from splittype.

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

from splittype.