Change words by random letters

[Policsek]

Hi,

 

Sorry for this long ( and maybe not clear ) description, but it's hard to explain in words what I'd like to do.

 

So let's say that I have 3 words ( 'portrait' , 'wedding' , 'concert' ) and, at first, only one is visible. What I'm trying to accomplish is to change the 1st word with the 2nd word, then the 2nd word with the 3rd word, then 3rd word with the first one and so on ( with a small delay between each one ) but I want to change them by random letters positions replacing with a small delay between each letter,  without waiting for the entire word to disappear to make the 2nd to appear, but by each letter. For example: from "portrait" to "wedding" ; "p[o]rtrait" -> p[e]rtrait ", p[e]rtrait -> p[e]rt[i]ait, p[e]rt[i]ait -> p[e]rt[i]a[g], p[e]rt[i]a[g] -> [w][e]rt[i]a[g], [w][e]rt[i]a[g] -> [w][e][d]t[i]a[g], [w][e][d]t[i]a[g] -> [w][e][d]t[i][n][g], [w][e][d]t[i][n][g] -> [w][e][d][d][i][n][g]. Each letter should animate at leaving by going up from default Y position ( 0 - > transformY100% ) and the new replacing letter should animate from bottom to default ( 100% -> 0 ). Back to example, "p[o]rtrait" -> p[e]rtrait ",  "o" is translated to Y100% and then, after the animation is finished,  "e" is translated from Y -100% to initial position and so on with each letter in a random order. 

 

Somehow, an example it might be https://dribbble.com/shots/6338076-CTMK ( but the animation here is on X position, it's not random and it's not changing the entire word, just a few letters, but I hope you'll understand  )

 

Guys, I know I might not be clear so I'll get it if no one can help me with this one, but I just can't figure it out how to do this.

[Policsek]

Oh, I guess it's not possible with a random order because each letter has its own different width on X and. For example, if you replace "i" with "m" then the text, until the animation is complet, would look bad. I guess it only works if you start from left to right..

[ZachSaucier]

Hey Policsek and welcome. Thanks for supporting GreenSock with a Club GreenSock membership!

 

37 minutes ago, Policsek said:

I guess it's not possible with a random order because each letter has its own different width on X and. For example, if you replace "i" with "m" then the text, until the animation is complet, would look bad.

It is possible, but you'd have to either use a monospace font (where all letters are the same width) or put each letter inside of its own div with a fixed width (which might look weird because it's not the way that the font was made to look; SplitText can help you do that dynamically).

 

P.S. When I made my personal website which replaces a word with a new word in the header I chose to do so by scrambling the text. Maybe you'd be interested in the logic that I used? Demo.

[Policsek]

31 minutes ago, ZachSaucier said:

Hey Policsek and welcome. Thanks for supporting GreenSock with a Club GreenSock membership!

 

It is possible, but you'd have to either use a monospace font (where all letters are the same width) or put each letter inside of its own div with a fixed width (which might look weird because it's not the way that the font was made to look; SplitText can help you do that dynamically).

 

P.S. When I made my personal website which replaces a word with a new word in the header I chose to do so by scrambling the text. Maybe you'd be interested in the logic that I used? Demo.

Thanks, I guess I'm gonna to something similar. Thanks for sharing!!

[Shrug ¯\_(ツ)_/¯]

I think it may be worthy to post links to the TextPlugin & ScrambleTextPlugin which someone might find useful for text effects.

[mikel]

Hey @Policsek,

 

Here is a side-by-side example

 

See the Pen gOMoJVQ by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel