slide in titles with splittext

[Chris Prieto 12 Likes (Newbie)]

I am trying to achieve something similar to the "Easy to understand, impossible to ignore™. We design digital platforms & branded experiences that position brands to matter in culture." text at the top of this page. It slides up line by line.  (https://basicagency.com/)

 

I created a quick pen but it doesn't work as expected. I thought it would be as easy as setting overflow hidden on the divs but soon realized the divs are whats being animated. Any ideas on how to set this up correctly would be much appreciated.

See the Pen ZgBpWx by ionz149 (@ionz149) on CodePen

[PointC 8,599 Likes (Superhero)]

Split it twice and you'll be good to go.

 

See the Pen pxBMvy by PointC (@PointC) on CodePen

 

Happy tweening.

 

 

[Chris Prieto 12 Likes (Newbie)]

8 minutes ago, PointC said:

Split it twice and you'll be good to go.

 

 

 

well that was profoundly simple, many thanks @PointC!

[ZachSaucier 467 Likes (Leader)]

Keep in mind responsiveness!

[Chris Prieto 12 Likes (Newbie)]

9 minutes ago, ZachSaucier said:

Keep in mind responsiveness!

 

Care to elaborate? I was under the impression that if I left the positioning at relative it would be okay.

[ZachSaucier 467 Likes (Leader)]

I would just recommend using yPercent instead of y because if the line wraps then you will see some of the lines.

 

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

[ZachSaucier 467 Likes (Leader)]

If you want to re-split the text when the browser size changes, see this thread:

 

 

 

[Chris Prieto 12 Likes (Newbie)]

Just now, ZachSaucier said:

I would just recommend using yPercent instead of y because if the line wraps then you will see some of the lines.

 

Ahhh, thank you. I always for get about that and use stuff like: y: '105%'

[PointC 8,599 Likes (Superhero)]

2 minutes ago, ZachSaucier said:

I would just recommend using yPercent instead of y because if the line wraps then you will see some of the lines.

 

Good call. That demo I posted was a fork of a user's question in a different thread so I wasn't paying much attention. Though I'd probably revert() and re-split on resize because it looks a bit odd to have two lines moving at once. Just my two cents. YMMV.

[Chris Prieto 12 Likes (Newbie)]

Any reasons this would work on codepen but not on the web page I am working on?

 

When I add the following lines to my main.js:

new SplitText($introTitle, {type:"lines", linesClass: 'lineChild'});
new SplitText($introTitle, {type:"lines", linesClass: 'lineParent'});

 

I get a bunch of errors in the browser console and page wont load:

 

SplitText.js:175 Uncaught TypeError: Cannot read property 'nodeType' of null
    at _deWordify (SplitText.js:175)
    at _deWordify (SplitText.js:173)
    at _setPositionsAfterSplit (SplitText.js:378)
    at pkg.SplitText._globals.SplitText.p.split (SplitText.js:526)
    at new pkg.SplitText._globals.SplitText (SplitText.js:130)
    at HTMLDocument.<anonymous> (main.js:33)
    at j (jquery-1.11.2.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-1.11.2.min.js:2)
    at Function.ready (jquery-1.11.2.min.js:2)
    at HTMLDocument.J (jquery-1.11.2.min.js:2)

 

I realize looking at bits of code like this isn't ideal but the codepen works so I am not sure how to replicate ?

 

I tried to re-order my scripts but nothing changes. Are there any obvious things I might be missing?

 

//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
//cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js
//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js

https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js
js/SplitText.js
https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js
https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js
js/main.js

 

[Chris Prieto 12 Likes (Newbie)]

Actually I think I fixed by making the split text into vars, fingers crossed

[Chris Prieto 12 Likes (Newbie)]

Dang, spoke too soon. So it seems the use of two SplitText is causing issues(?) 

 

If I only use one SplitText everything works but once I add that second SplitText I get the error below and page stops loading: 

 

Uncaught TypeError: Cannot read property 'nodeType' of null

 

I reviewed my previous usage of SplitText on past projects but I've never tried to apply twice to same object so I am at a loss as to why it only works in codepen and not on the page I am building

[PointC 8,599 Likes (Superhero)]

Is the window loaded and DOM ready? Sir @Jonathan has written about this several times. Here's a bit of his wisdom.

Does that help?

[Chris Prieto 12 Likes (Newbie)]

11 minutes ago, PointC said:

Is the window loaded and DOM ready? Sir @Jonathan has written about this several times. Here's a bit of his wisdom.

Does that help?

 

I am not positive that is my issue. It very well might be but after reading I don't think it is. I am also assuming if this was the issue I wouldn't be able to use the single SplitText on the h1(?)

 

I'm using the same markup and code in the codepen provided so I don't know why it would work in codepen and not on an html page. More confused as to why only one SplitText works but gives error when two are used on same h1.

 

I tried removing everything from my project to match the codepen (jquery version etc.) but the issue still persist ?

[ZachSaucier 467 Likes (Leader)]

Can you post the minimal example of the live site online somewhere for us to check out?

[Chris Prieto 12 Likes (Newbie)]

@ZachSaucier sure: https://bpmmediagrp.com/test/

 

So the troublesome SplitText is on line 50 of main.js, if commented out it will begin working. If it's any help I tried setting up like Jonathan suggested in the linked thread but issue still persisted. I tried more recent versions of jquery as well but issue still persisted. I feel it has to be something *super* stupid on my part ?

 

edit: the intended recipient of the double Splittext is the H1 in #intro div

[ZachSaucier 467 Likes (Leader)]

Very peculiar. I made an exact copy on my local computer (running at file:///) and it works just fine...

 

It must have something to do with your resource importing or trying to run the JS before the page is ready but I am not seeing anything wrong in the network or sources... 

 

Maybe it'd help to continue stripping out unrelated pieces until the error stops. Or you could try the opposite, building on pieces until you can reproduce the error again.

[Chris Prieto 12 Likes (Newbie)]

Thanks @ZachSaucier, at least Im not going totally nutty ...

 

I removed more stuff leaving only the #intro div and the h1 in question and now it just loads empty h1 with inline style of display:none. It was doing this prior but was not visible past the broken faux-preloader. I really am not that gifted in the ways of javascript/jquery so I am not doing anything fancy and the fact that one instance of SplitText works and not two makes me think something else is up.

 

https://bpmmediagrp.com/test/

 

Why would only one work but not two? Tried all browsers, local/stg server, jquery 1/2/3.

 

I did notice the split text file I am using is more recent than the one being used on codepen. Not sure if that makes any difference. Tried using the one from codepen but it complained because it is for demo only.

 

demo: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js

live file: https://bpmmediagrp.com/test/js/SplitText.min.js

 

[Chris Prieto 12 Likes (Newbie)]

So no other ideas on what could be wrong with this?

[PointC 8,599 Likes (Superhero)]

Have you tried this?

 

var $introH1 = $('#intro h1')[0];

 

 

[Chris Prieto 12 Likes (Newbie)]

6 minutes ago, PointC said:

Have you tried this?

 

 

I just did but still borked. Took more stuff out of the page. It does do a quick fouc but no text splitting.

[PointC 8,599 Likes (Superhero)]

How about removing jQuery from the equation?

 

var introH1 = document.querySelector('#intro h1');

 

[Chris Prieto 12 Likes (Newbie)]

3 minutes ago, PointC said:

How about removing jQuery from the equation?

 

I tried that too but same results.

[Chris Prieto 12 Likes (Newbie)]

okay so I had an 'oh sh*t' moment and just tried this out of desperation and it seems to be working ?‍♂️

 

new SplitText('#intro h1', {type:'lines', linesClass: 'lineParent'});
new SplitText('#intro h1 .lineParent', {type:'lines', linesClass: 'lineChild'});

 

I feel a lil stupid for not having tried this earlier but I appear to be cooking with bacon now. Thanks to everyone who chipped in

[PointC 8,599 Likes (Superhero)]

Glad to hear it works now. Thanks for letting us know.

 

Kinda weird though. I did the same thing Zach did in trying it locally and had no problems. ?

 

Oh well, you fought the gremlins hard today. Time to go enjoy some much deserved pizza. ? Happy tweening.