Splittext lines breaking on wrong point

[aderaaij]

I've been trying to recreate the 'lines' demo in the following codepen: 

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

but somehow my version keeps breaking the lines at the wrong point. Could someone perhaps give me any pointers on what I'm doing wrong? I've tried widening the container div, changing font-size units, etc. but to no avail.

 

 

Any help is greatly appreciated. 

See the Pen dYGgmz by aderaaij (@aderaaij) on CodePen

[Diaco]

Hi aderaaij 

 

SplitText breaks your text to divs , the problem come from when you set font size to .class div , and after breaking you have new font size ! so , in your CSS , pls remove these lines from  .quoteHero__quoteContent div and add to .quoteHero__quoteContent :

font-size: 30px;
line-height: 40px;

See the Pen GpZpjP by MAW (@MAW) on CodePen

[Carl]

Hi and welcome to the GreenSock forums.

 

The problem is that SplitText is placing your lines in new divs that are sized correctly BUT you then have styles that change the size of text in those divs.

&__quoteContent {
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 20;
    color: #fff;
    width: 900px;


    p {
      line-height: 50px;
      width: 100%;
      text-align: left;
      font-weight: 400;
      // font-size: 5vh;
      font-size: 30px;
      margin: 0 0;
    }


    div {
      /*this is the problem
      You are resizing the text after it is split
       font-size: 5vh;
     font-size: 30px;
     line-height: 40px;
      */
    }
  }

http://codepen.io/anon/pen/ZbWbBp

 

+5 points for Diaco!

[aderaaij]

Hi guys, thank you so much for the quick answers and apologies for the late reply, I didn't have e-mail notifications on and didn't expect such swift answers. Much kudos for you guys. 

 

Indeed Diaco, your answer was absolutely right. First I had my text styles on the P tag, but as this is changed into multiple DIV's when handled by splittext, which made them lose their styles. In my train of thought it was logical to redeclare those on the DIV, causing my problem. Now I declared them straight on the .quoteHero__quoteContent and everything works like a charm.

 

Thanks again, I really enjoy working with greensock, and knowing the support is this great makes it even better.

 

edit: While I'm at it, I've got something I can't seem to reproduce on Codepen. On my localhost the codepen example is part of a slideshow. The first loads in plain html, the next ones are loaded through ajax. On first load the lines still aren't broken on the right points. When I ajax load the next one they all animate fine though. When I add a timeout to the animate function it works fine as well. Is that something that sounds familiair and might have an easy fix? 

[Diaco]

you should to call SplitText() after ajax success and appending or changing your text content .  seems you create SplitText object sooner . 

[aderaaij]

Ah I might've not explained it well, but the problem isn't with the ajax calls. The problem is only at the initial animation which is called on document.ready (same as splittext). The link to the JS file is in the footer so I assume that shouldn't give any problems. I do have to add that I've got the splittext var and animation sequence in one seperate function. Maybe moving it outside of the function would help somehow?

 

edit: I put the first animation in a $(window).load(function() { }); and all is well! Thanks

[atwellpublishing]

I'm having an issue where we instantiate SplitText on ready and sometimes the line breaks at the wrong spot, while other times it breaks at the right spot. It always breaks at the right spot after a page refresh. And I have to open incognito browsers over and over again until I can get it to break wrong on the first page visit. 

 

Should we not be initiating SplitText on ready state? We see proper behavior 90% of the time. 

[Visual-Q]

You might want to start a new post for this as it attached to a very old one. 

 

As far as the issue goes it suggests that something is causing the text to change and reflow after document ready which I presume is what you mean by ready. It's generally better to setup animation after window.onload that way all elements should be loaded, also make sure that the splittext script runs  after any other scripts that may affect the text or any containers it might be in.

 

 

 

Without a working example it's kind of impossible to diagnose further.