Jump to content
GreenSock

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

Random ScrambleText and back

Recommended Posts

I am trying to achieve a similar effect on the menu elements on this site: http://www.kikk.be/2016/

 

As you can see, the text scrambles, and goes back,

 

This is my code here:

$('h1').each(function() {
	var _this = $(this),
			mySplitText = new SplitText(_this, {
			  type: "chars"
			}),
			newchars = '*?�><[]&@#)(.%$-_:/\\;?!azertyuopqsdghjklmwxcvbn'.split(''),
			randomchars = shuffleArray(newchars),
			letters = shuffleArray(mySplitText.chars),
			tl = new TimelineMax({ paused: true });

	$(letters).each(function(index, element){
	  tl
	  	.to(letters[index], 0.02, {scrambleText: randomchars[Math.floor(Math.random() * newchars.length)]}, index*0.02);
	});
	_this.hover(function() {
		tl.play();
	},function() {
		tl.reverse();
	});
});
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;
}

I am getting close, but it's taking some time :) Any help is appreciated.

See the Pen zoJLZN by anteksiler (@anteksiler) on CodePen

Link to comment
Share on other sites

Hello anteksiler

 

Have you looked into using the GSAP ScrambleTextPlugin? GSAP already did the heavy lifting for you!

 

ScrambleTextPlugin Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrambleTextPlugin/

 

Examples:

 

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

See the Pen kcoEq by rhernando (@rhernando) on CodePen

 

:)

Link to comment
Share on other sites

I am actually using the ScrambleText, but it does not give me the option to randomize the order, that's why I had to use SplitText to randomize the letters.

Link to comment
Share on other sites

Are you trying to make it be random on every hover?

Link to comment
Share on other sites

Yes, that would be ideal, and would like to only scramble random number of letters, not all of them.

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