Cascading Green Matrix-style Text Demo

[soupking 12 Likes (Newbie)]

Hey GS,

 

Does anybody know where to find a similar sort of demo online? I do a search and matrix for CSS keeps coming up. I can't get a good search with the term 'matrix'. I guess it's too outdated.

[Shaun Gorneau 2,031 Likes (Superhero)]

Found this using the search term "matrix code effect javascript"

 

See the Pen Gjomdp by riazxrazor (@riazxrazor) on CodePen

[soupking 12 Likes (Newbie)]

57 minutes ago, Shaun Gorneau said:

Found this using the search term "matrix code effect javascript"

 

 

 

Thanks. That's gorgeous, but I think I totally just posted a misleading topic. I need something that shuffles through letters then stops at a given word. I actually don't need all the green streaming effects.

 

Not sure what the search would be for that either, though. 😕

 

[Shaun Gorneau 2,031 Likes (Superhero)]

Yup, that changes things 👍

[ZachSaucier 7,133 Likes (Superhero)]

GSAP's ScrambleText plugin is perfect for this!

[Shaun Gorneau 2,031 Likes (Superhero)]

So I took a quick and dirty stab at this as a fun personal challenge on a Monday evening. What better way to get the creative juices flowing for the week 👍🏼

 

See the Pen yLOrqrQ by sgorneau (@sgorneau) on CodePen

 

Also .. the effect is better in a bigger view

codepen.io/sgorneau/full/yLOrqrQ

 

Better with a Matrixy font

 

See the Pen oNxOJjL?editors=0010 by sgorneau (@sgorneau) on CodePen

 

I also realize this is not the effect OP was getting at ... Zach's recommendation of scramble text is perfect for what OP is looking for (which is reminiscent of the phone number digit matching scene in the Matrix, although the matched digits aren't part of any scramble).

[Rodrigo 5,088 Likes (Superhero)]

Turns out that Shaun is The One