SplitText breaking responsive page layout

[cerealbeast]

Im using SplitText to reveal some text on a page which is working fine, but it is causing the page layout to break. The text column is 45% on desktop view and 100% on tablet and mobile view. When SplitText is active it is causing the layout to stay at 45% when the browser is resized to tablet view. When I turn SplitText off the problem is resolved. 
 

This is how the text should look (view in the page editor)

 

This is how it looks with SplitText active

 

This is my code ()

jQuery(document).ready(function($) {

;(function(){
    let chck_if_gsap_loaded = setInterval(function(){
			const eleBuilder = document.querySelector('body').classList.contains("elementor-editor-active");
       if(window.gsap && window.ScrollTrigger && !eleBuilder){
           gsap.registerPlugin(ScrollTrigger);
		   gsap.registerPlugin(SplitText);
            text_reveal();
            clearInterval(chck_if_gsap_loaded);
        }
    }, 500);

function text_reveal(){
	
const splitLines = new SplitText(".split-me p", {
  type: "lines",
  linesClass: "scroll-reveal scroll-reveal++"
});

jQuery(".split-me .scroll-reveal").wrap('<div class="scroll-reveal-wrapper">');

gsap.utils.toArray(".scroll-reveal").forEach((el) => {
  gsap.from(el, {
    yPercent: 200,
    duration: 1,
    ease: "power4",
    scrollTrigger: {
      trigger: el,
      start: "top 90%"
    }
  });
});
};	
})();
	});

 

See the Pen JjZwvGj by gwjr (@gwjr) on CodePen

[Rodrigo]

Hi,

 

This  seems to work the way you intend:

See the Pen MWXZGNW by GreenSock (@GreenSock) on CodePen

 

Is a good idea in this scenarios to use ScrollTrigger Batch in order to simplify your code.

 

Finally I'm not 100% this is the best option and the most performant so I'll ping @GreenSock so He can take a look at it and be the judge of that.

 

Let us know if you have more questions.

 

Happy Tweening!

[cerealbeast]

I just posted at the same time as you, let me check the codepen you provided and get back to you.

[cerealbeast]

Unfortunately I'm still having the same problem. When resizing the browser the text is not responsive, the line breaks change and there are blank spaces etc. You can see this behaviour on your example also.

Looking through this forum I can see lots of people with similar issues, it seems I may need to use 'revert' somehow so that when the browser is resized the code is re initiated?

[cerealbeast]

I have found a temporary solution which just stops the animation when the browser is resized and this fixed all of the text issues, but it would be better to have a solution that allowed the animations to continue working after the browser is resized.
 

jQuery(window).resize(function () {
        splitLines.revert();
      });

 

EDIT: it also stops the animation working on mobile

[cerealbeast]

Does anyone at Greensock have a solution for this?

[Rodrigo]

Hi,

 

I've been looking into this trying to get the best possible solution but I can' seem to find something that works properly and has a good performance.

 

This is the closest I have but as you can see performance is not really good:

https://cdpn.io/pen/debug/bGKOMyQ

 

I bumped this to @GreenSock so He can take a look and perhaps propose a better approach for this.

 

Please stand by.

 

Happy Tweening!

[cerealbeast]

Ok thank you Rodrigo, hopefully @GreenSock knows how to fix it!

[GreenSock]

Here's how I'd do it (if I understand your goal correctly): 

See the Pen YzvBQPR?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Improvements: 

1. Eliminated the need for jQuery
2. Properly reverted SplitText instances when you resize so that natural flow is restored, and then split them again
3. Debounced the resize handlers (much better performance than constantly reverting/resplitting on every "resize" event - it just waits until 200ms elapses with no more resize events)
4. Leveraged some helper functions for calling a function after a certain condition is met (replaces your setInterval) and one that does the resize debouncing
5. Used a gsap.context() to make it very simple to revert() every tween/ScrollTrigger that was created in that context at once. 

Does that help?