medamis Posted April 21, 2021 Share Posted April 21, 2021 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 .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 More sharing options...
Dipscom Posted April 21, 2021 Share Posted April 21, 2021 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. 1 Link to comment Share on other sites More sharing options...
medamis Posted April 21, 2021 Author Share Posted April 21, 2021 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 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 More sharing options...
Solution Dipscom Posted April 21, 2021 Solution Share Posted April 21, 2021 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. 4 Link to comment Share on other sites More sharing options...
OSUblake Posted April 21, 2021 Share Posted April 21, 2021 You to need to wait for your fonts to load before splitting the text as the sizing will be different. https://stackoverflow.com/a/32292880/2760155 4 Link to comment Share on other sites More sharing options...
ponzo Posted December 30, 2021 Share Posted December 30, 2021 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%", }); }); 1 Link to comment Share on other sites More sharing options...
Deallie_Digital Posted April 18, 2022 Share Posted April 18, 2022 I'm experiencing a similar issue. I assume Split Text should not be applied to Font's with clamp? Link to comment Share on other sites More sharing options...
OSUblake Posted April 18, 2022 Share Posted April 18, 2022 Welcome to the forums @Deallie_Digital I'm not sure what you mean by fonts with clamp. Do you have a minimal demo of what you're trying to do. Link to comment Share on other sites More sharing options...
Deallie_Digital Posted May 10, 2022 Share Posted May 10, 2022 I'm unfamiliar with that function, but I'll take a look and let you know if it worked. Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now