SplitText - random line break
Hi, I have problem with split text sometimes it's breaking like this
Sometime like this (this is what I want all the time) :
Here is code I use:
const section_1_heading = new SplitText('.section-1 .heading');
const section_1_desc = new SplitText('.section-1 .desc');
gsap.from(section_1_heading.lines, 1.2, {
opacity: 0,
x: -120,
delay: 0.6,
ease: 'power3.out',
stagger: { amount: 0.2 },
scrollTrigger: {
trigger: `.section-1 .containe
I have the same problem using
font-display: auto;
is the default from typotheque.com
which results into different linebreaks everytime.
I followed OSUblake's direction to load the fonts first, if browsers not support this API then the text is not split and animated, but still visible which is enough
document.fonts.ready.then((fontFaceSet) => {
const childSplit = new SplitText(".p-line", { type: "lines" });
gsap.set(childSplit.lines, { opacity: 0 })
