Using SplitText on marked up text

[al]

Is it possible to use SplitText on some markup (and text) without it stripping the markup? I would like to "drop" the text onto the screen, but preserve the markup so I get its positioning (its all currently in a UL).

 

I was going to try to codepen this but I can't figure out how to reference SplitText and the other core libraries.

 

If this is possible with split text, how can you animate "dropping" an element onto the page?  What properties would you use to do it? Scale with x/y?

 

Thanks,

Andrew

 

[GreenSock]

Could you explain what you mean by "preserve the markup"? There is a note in the docs:

SplitText only recognizes raw text and <br> tags, not child elements like <strong> or <em> elements.

 

Does that answer your question? You could certainly split the text inside of each of those elements (inside the <strong> and <em> or whatever), and manipulate the animations accordingly (like concat() the chars arrays together, for example). 

 

As for creating a codepen, here's a collection and you can fork any of them - that way, you know that the SplitText file is being loaded properly:

http://codepen.io/collection/KiEhr/

[al]

I thought about this last night after I posted this and finally I realized I shouldn't be using the SplitText plugin at all.  That plugin is for breaking text into dom elements so you can animate them.  In my case, I already have the dom elements (namely, the li's inside my ul), so all I would have to do then is animate each li individually to have them "drop" onto the page.

 

I'm new to codepen and I didnt realize you could fork them, I will do that next time, thanks for that tip.

 

While I have you, are there any resources for some more "complex" animations, such as the dropping I keep referring to, or will I have to figure out how to code it?

 

My idea would probably be to animate the scale and y properties of each li to have them "drop" onto the page.  I would likely have to animate each at a different speed and and varying intervals to kind of make it look like it was "raining" items.

 

Any tips would be greatly appreciated.

 

Here is a pen of me trying to accomplish this.  Actually, it isnt all that bad:

 

See the Pen vykLB by andrewleith (@andrewleith) on CodePen

 

Thanks again,

Andrew

[GreenSock]

Sure, that should be relatively simple.

 

First, if you didn't need varying durations, you could simply use a staggerFrom() like this:

TweenMax.staggerFrom(".yourClass", 1, {y:-200, opacity:0, scale:1.5, ease:Back.easeOut}, 0.1);

But I know you want to use randomized offsets, so you could do a loop:

var maxDelay = 2;
$(".yourClass").each(function() {
    TweenLite.from(this, 1, {delay:Math.random() * maxDelay, y:-200, opacity:0, scale:1.5, ease:Back.easeOut});
});

Notice I'm just randomizing the delay. 

 

There are a bunch of ways you could do this. Hopefully this gets you going. 

 

As for more complex examples, here's raw codepen version of the animation that you'll find on the GreenSock home page:

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

 

(That might be a bit more complex than you were looking for, but you'll see a lot of techniques in there that could be useful)

[al]

Thanks for the link to that codepen, I'll browse through those animations.

 

One thing I just noticed by doing this is that if my elements are not set to position: absolute, the animation does not occur as intended at all.

 

Check out this codepen:

See the Pen vykLB by andrewleith (@andrewleith) on CodePen

 

The animation run on both set's of li's is the exact same, yet only the position:absolute version "drops" onto the page (obviously this doesnt work however since all the text is stacked on top of each other).

 

Is there something fundamental I'm missing here?

 

Thanks,

Andrew

[Carl]

the issue is that your li's with position relative expand the full width of their containing element.

 

look here: http://codepen.io/GreenSock/pen/ocamz

 

the top li's appear to come in from the left because the scaling is happening from the center and is quite exaggerated towards the edges.

[al]

Genius.  I figured it wasn't a greensock issue at all.  I'll play around with the css to bend it to my will.

 

 

Thanks very much!