splittext random fade

[gareth 13 Likes (Newbie)]

I have a basic split text tween, that fades in each letter one by one, is it possible to fade in each letter in a random order, rather than left to right?

var tl = new TimelineLite, 
mySplitText = new SplitText("#songTitle", {type:"words,chars"}), 
chars = mySplitText.chars;
tl.staggerFrom(chars, 3, {opacity:0,  ease:Strong.easeOut}, 0.06, "+=0");

[jamiejefferson 1,199 Likes (Superhero)]

Yes, you would just need insert a random sort on chars before calling staggerFrom.

[Carl 11,115 Likes (Superhero)]

Another technique would be to loop through the Array of characters and create tweens with random start times. 

var mySplitText = new SplitText("#quote", {type:"chars, words"}),    tl = new TimelineLite(),
    numChars = mySplitText.chars.length;


for(var i = 0; i < numChars; i++){
  //random value used as position parameter
  tl.from(mySplitText.chars[i], 2, {opacity:0}, Math.random() * 2);
}

http://codepen.io/GreenSock/pen/HafFE?editors=001

 

Here is a similar approach used on words with some more randomization:

http://codepen.io/GreenSock/pen/waCoe?editors=001

[gareth 13 Likes (Newbie)]

perfect, thank you

[celli 88 Likes (Contributor)]

This is great! But adding other properties like rotation or scale like this seem to cause it not to work randomly:

tl2.from(mySplitText.chars, 2, {opacity:0, rotation:180, scale:2}, Math.random() * 1);

 

Is there a way to make each letter fade in, and scale in at different sizes up to 200%, and also tween to position from a different starting x,y position with split text ? I can't seem to find any code or tutorials to explain how to do this.

[Carl 11,115 Likes (Superhero)]

Hmm, i'm not sure what you are seeing that doesn't work properly.

 

 

Regardless, you can randomize other properties like so

tl.from(mySplitText.words[i], 1, {force3D:true, x:Math.random() * 500, y:Math.random() * 500, scale:Math.random() * 2, opacity:0}, Math.random());

http://codepen.io/GreenSock/pen/gucCx?editors=001