De-Cryptic Text Animation

Community resources Product feedback
#1

Hi, I was wondering how I can make text animation that looks like it is de-crypting?

My goal is to have text in a cryptic message and on page load have it form the text I want.

The closest one I could find as an example is: https://www.disruptivesocial.co.uk/

If you hover the mouse over “approach” it plays the text animation.

Thank you!

#2

I’d say the easiest way would be to use lottie animations and after effects. Here’s a link on how to implement one:

I’m pretty certain that the bodymovin plugin doesn’t support the decrypt text effect from after effects natively, but if you create the animation you want and export it as an image sequence then import back to after effects, you’ll be able to export the animation ready for webflow.

#3

When you inspect the element, you can see that the elements value is actually changing and its random(the order of the text) every time. I can think of a very brute force solution with this using some custom js.

Create an array of the word.
Randomize the array.
Then sort the array.
Render every step of the sort.

I dont know TOO much about lottie/AE but im pretty sure that isnt how they achieved that effect on the site.

#4

Thank you so much for the reply! I was debating between custom js and lottie and wasn’t sure which one would be better:sweat_smile:

#5

Thanks for the reply! Lottie animation was something I was thinking about. Any idea how this compares to a custom js?

#6

Hi guys, as I’ve just discovered character offset and character value aren’t supported by BodyMovin or Lottie, so this kind of animation isn’t possible.