Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
bforte

Split Text / ScrambleText - Random Stagger

Recommended Posts

I have a question on the SplitText and ScrambleText plugins, which were briefly covered in Carl's (awesome) course last week. Is it possible to randomize the order of the animating type? For example, if I am using SplitText to spell "ANIMATE" character-by-character, is there a way to not have it animate 'A' then 'N' then 'I' etc?

 

 

See the Pen MKYboP by bforte (@bforte) on CodePen

  • Like 1
Link to comment
Share on other sites

Hello bforte, and Welcome to the GreenSock forum,

 

Did you want to randomize or shuffle the order of the SplitText letters?

 

Basically the mySplitText.chars is an Array. So you  can just pass that Array to a function that will shuffle / randomize the Array around.

 

See the Pen GogNGm by jonathan (@jonathan) on CodePen

 

So you could do something like this:

// randomize array elements using the Durstenfeld shuffle algorithm.
function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

var mySplitText = new SplitText("#text", {
    type: "chars"
  }),
  tl = new TimelineLite(),
  numWords = mySplitText.words.length,
  shuffleCharArray = shuffleArray(mySplitText.chars); // shuffle char array

TweenLite.set("#text", {
  perspective: 400
});

tl.staggerFrom(shuffleCharArray, 0.5, {
  autoAlpha: 0,
  rotationY: -90,
  transformOrigin: "0% 50%"
}, 0.1);

And the CSS so it doesn't show on load, since i'm using autoAlpha instead of opacity:

#text > div {
  visibility:hidden;
}

But this kind of thing can be done with other sorting, randomizing, or shuffling array functions.

 

Is this what you meant to do?

 

You could even do a reverse of the char Array.. using reverse() .. mySplitText.chars.reverse():

 

See the Pen MKYbqL by jonathan (@jonathan) on CodePen

 

:)

  • Like 5
Link to comment
Share on other sites

Yes, that is doing exactly what I'd hope it'd do in SplitText!

 

When using ScrambleText, it looks like I'd be entering the text directly into the timeline code. How would I incorporate that shuffleArray function in that scenario?

 

Edit: this is what I'm using as reference for ScrambleText: 

See the Pen dIBbw by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

I'm not sure that is supported to have a shuffle or random order of letters animating in using the ScrambleTextPlugin?

 

But I'm not 100% sure based on the ScrambleTextPlugin Docs since that text is specified in a string, and not as an array.

 

I believe the GreenSock Grandmaster's Jack and Carl will have to answer that one!

  • Like 1
Link to comment
Share on other sites

Hi Brian,

 

Glad to see you posting here. 

I'm not exactly sure what your end goal is. It sounds to me like you may want to scramble each character in a random order.

ScrambleText plugin does not do that on its own. I guess you could break apart the text with SplitText, shuffle the array (as Jonathan mentioned), and then scramble each character in the shuffled array.

 

here is a very basic implementation of that technique http://codepen.io/GreenSock/pen/JGoBvN?editors=001

  • Like 3
Link to comment
Share on other sites

Hi Carl - 

 

I am still in the "theoretical stage" of the project, so it's hard to articulate exactly what the end goal is right now. The pen you posted is really cool and I think should provide the solution. I'll keep you updated once I get further into it.

 

Thanks, everyone!

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.
×