Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Chris Prieto

slide in titles with splittext

Recommended Posts

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

Link to comment
Share on other sites

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

 

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

 

Happy tweening.

:)

 

 

  • Like 3
Link to comment
Share on other sites

8 minutes ago, PointC said:

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

 

 

 

well that was profoundly simple, many thanks @PointC!

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

 

 

 

  • Like 1
Link to comment
Share on other sites

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%'

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

  • Like 3
Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

@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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Have you tried this?

 

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

 

 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

How about removing jQuery from the equation?

 

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

 

  • Like 1
Link to comment
Share on other sites

3 minutes ago, PointC said:

How about removing jQuery from the equation?

 

I tried that too but same results.

Link to comment
Share on other sites

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 :D

  • Like 3
Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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.
×