Jump to content
Search Community

SplitText - random line break

medamis test
Moderator Tag

Go to solution Solved by Dipscom,

Recommended Posts

Hi, I have problem with split text sometimes it's breaking like this

 

image.thumb.png.b274dd9038137144c8c40b80401ce890.png

Sometime like this (this is what I want all the time) :

image.png.7dd83f6e7e6fabb6f8738d1864e5721f.png 

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 .container`,
      start: 'top 400',
    },
  });

  gsap.from(section_1_desc.lines, 1.2, {
    opacity: 0,
    x: -120,
    delay: 0.6,
    ease: 'power3.out',
    stagger: { amount: 0.2 },
    scrollTrigger: {
      trigger: `.section-1 .container`,
      start: 'top 400',
    },
  });

 

Link to comment
Share on other sites

12 minutes ago, Dipscom said:

Hi medamis,

 

Welcome to the forums! Is it possible for you to create a minimal code example? I can see your screenshot, I can see your code but I cannot guess on what context what you are reporting happens. It really helps us to help you to have an example we can tinker with.

 

Thank you.

 

Here 

See the Pen poRxMmv by medamis (@medamis) on CodePen

 

sometimes when I refresh fast It makes this

 

image.png.4667cb33d9e7a92edd9525408ab081c7.png

 

It's like 10% chance that It happens but I want to be 100% sure that it will break correctly. On my website I have many animations and It happens even more often. Maybe I should fire this when DOMContentLoaded?

Link to comment
Share on other sites

  • Solution

Hi, thanks for the demo. It does help.

 

Nothing is jumping out at me right now, I don't see any glaring issues with your code or the context in which is written. It could be that I am just not seeing the actual issue but I would say you should definitely wait until the DOMContentLoaded has fired before running splitText - what might be happening is your content is shifting at the same time that SplitText is setting up and it might be messing the DOM structure.

 

On this last screenshot you have sent, it looks like every word is displaying as a block. As much as I refresh here, I don't see the issue you are reporting.

 

Now I have to ask you to not link to a copy of SplitText as you have done in the CodePen. SplitText is part of the Club Greensock, it shouldn't be shared around and it shouldn't be posted on the open web. You can use all Club Greensock's plugins on CodePen for free anyway. Please remove that link and replace it with the one available on CodePen.

 

You should also try to use GSAP's new syntax, it's more concise and full of other goodies.

  • Like 4
Link to comment
Share on other sites

  • 8 months later...

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 });
    ScrollTrigger.batch(childSplit.lines, {
      onEnter: (batch) => {
        gsap.set(batch, { opacity: 0, yPercent: 100 });
        gsap.to(batch, {
          yPercent: 5,
          duration: 1,
          opacity: 1,
          ease: "power4",
          stagger: 0.2,
        });
      },
      onLeaveBack: (batch) => gsap.to(batch, { opacity: 0, yPercent: 100 }),
      start: "bottom 95%",
    });
  });

 

 

 

 

 

 

Screenshot 2021-12-30 at 10.50.24.png

Screenshot 2021-12-30 at 10.50.14.png

  • Like 1
Link to comment
Share on other sites

  • 3 months later...
  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...