Split Text not working on iPhone or in chrome

[CarpeDiem]

I am very new at using the Split Text utility.  I was having fun with it and when i previewed my locally in browsers (Firefox, Safari and Chrome all was good.  But when I uploaded the file to a server, the animation did not work in chrome.  Also, the animation did not work on my iPhone.

 

I provided a link to my first code pen but when I hit run, it isn't even working at all.  I am using a local copy of the "SplitText.min.js"

 

Can anyone help?

See the Pen JGyVYX by anon (@anon) on CodePen.

[Dipscom]

You need to have it uploaded into codePen for it to work there. Did you upload the plugin to your server as well?

[Carl]

I added SplitText to your pen: http://codepen.io/GreenSock/pen/JGyVBN

 

Please note that you can always fork this pen, if you need to make a SplitText demo: http://codepen.io/GreenSock/pen/rApJv from support pens collection:     http://codepen.io/collection/qHasJ/

 

We will now try to see if we can replicate the problem. Thanks so much for demo.

[Carl]

I can confirm that my fork of your demo works in both Chrome (MAC desktop) and Safari on iOS 8.

If you are still having trouble, please let us know. It will probably help to see a link to your live site to see if there are any errors.

[CarpeDiem]

Hi there,

I just edited the code pen and uploaded the SplitTest.js file.  It is still not working in code pen.

 

I no longer have the chrome problem but the animation is not working on my phone.

 

I don't know what I'm doing wrong in code pen.  As I said, this is my first try at using it

[Carl]

SplitText will only work in CodePen if you include our special version of it: http://prntscr.com/9q2ulf. 

That is why we recommend that you fork our demos. You can see which scripts are being used by clicking on settings > JavaScript (or just click on the gear in the JS tab of the editor).

 

Please test this version that I made for you: http://codepen.io/GreenSock/pen/JGyVBN

 

Please confirm that it works in Chrome and on your phone. Thanks.

[CarpeDiem]

thanks carl.  i see that the code pen sample is indeed working and i am not having any trouble with my local file working in all desktop browsers but, when i put the folder with all the assets (the code pen example didn't include an image that i used) on a server and then try to access the link on my iPhone, i don't see the text animating the way i see it animating on desktop browsers.  does this make any sense to you?

[Carl]

I really don't know why that would happen. There is nothing in your code that would make me think it wouldn't work on an iPhone. Can you share the link to your live server?

[CarpeDiem]

Carl

I'm okay now with my sample file, it works fine on phones.

 

But I have another question, can custom fonts be used?

[Jonathan]

Hello Lauren Johnson

 

Here is Carl's codepen forked from your foked codepen.. and using a Google web font called Open Sans:

 

See the Pen WrXYRG by jonathan (@jonathan) on CodePen.

 

So yes it is possible, hope this helps Lauren