Jump to content
Search Community

Split Text / ScrambleText - Random Stagger

bforte 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

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 6
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

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