Closed helloganiel closed 10 months ago
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?
Do you want me to reopen this?
Hello Luke, after reloading the page you can already see the change. Yes, it is quite visible, see this: https://streamable.com/atv8lo
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 ?
No I am not using react, just webflow with codesandbox linked in.
Here you can preview my webflow site:
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);
});
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...
setTimeout
with a of a delay of few seconds. 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)?
Yeah, I see what you mean. I'll take another look.
I'm going to close this. Sorry I wasn't able to resolve this.
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!