Jump to content
Search Community

SplitText ex?

Vic test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi, I just signed up for the club again.

I'm trying to use SplitText of #code1 ( https://github.com/shawea/blueGrass/blob/master/pri/aCDN/view/Why.html )

using this code (

 line 23 https://github.com/shawea/blueGrass/blob/master/pri/aCDN/app/App.js

)

 

When I don't split, the text shows. When I do split, it goes to one line or something, can't be seen.

Is there example split text?

 

tia,

  • Like 1
Link to comment
Share on other sites

Hi,
 
In line 24 you have this:

var split = new SplitText("#code1");

TweenMax.staggerFrom(split.lines, .4, { y: -100, autoAlpha: 0, ease: Elastic.easeOut }, 0.1);

The problem is what you're splitting to nothing, you have to indicate in this case that the split should be lines, like this:

var split = new SplitText("#code1", {type:'lines'});

TweenMax.staggerFrom(split.lines, .4, { y: -100, autoAlpha: 0, ease: Elastic.easeOut }, 0.1);

This is all I can see without  a live sample, I'm a total Git ignorant.

 

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

Actually, if no type is defined, SplitText will use chars, lines and words.

 

I think the problem here has more to do with the fact that he is trying to split the contents of <pre> tag. 

 

SplitText is going to wrap each line, char and word in its own div INSIDE the <pre> tag. The pre tag is trying to treat its content as pre-formatted text... not as actual DOM elements. 

 

Vic, I would stay away from trying SplitText on <pre> tags for this very reason. 

 

Here are some examples of SplitText

http://codepen.io/GreenSock/pen/44cb85af3d255c2431f297c20a361f35

http://codepen.io/GreenSock/pen/f6e69ac9a6c662e0685eb0e6bb15ec67

  • Like 1
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.
×
×
  • Create New...