Jump to content


splittext random fade

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

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");
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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);


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


  • Like 2
Link to comment
Share on other sites

perfect, thank you

Link to comment
Share on other sites

  • 1 month later...

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.

Link to comment
Share on other sites

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());


  • Like 2
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.