Replicating The Secret iOS App Text Animation using HTML CSS JavaScript

Following the huge success of my previous "replicating" post regarding recreating Facebook UI on the mobile app for iPhone, I decided to do another one. :) This morning I came across this article by NatashaTheRobot on recreating The Secret iOS App Text Animation using ObjectiveC (for iPhone and iPad apps).
I decide to create my own version, using web technologies. This obviously makes it almost 100% cross-platform and can be immediately implemented in PhoneGap projects.
The demo below is slowed down to better showcase, obviously duration can be adjusted as desired. You can download the app here: Secret for iOS on the App Store. Obviously Secret app is getting all the praise but to tell the truth, I've been implementing this in my app MyLyrics for well over a year! :)
 

MyLyrics is Shazam when the song is not playing. When you only know a few words of the lyrics (and therefore can't use Shazam) you just type them in the app and you get the song.

If you're interested in my process on the JavaScript side, these are the steps:

• grab the content of the target holder element
• split it by every character
• join all characters back together but each within their own span tag with opacity set to zero
• generate a random number between 0 and the number of character
• change the opacity of that random character to 1 with a CSS transition
• once all characters have been processed, the iteration stops.

As usual, feel free to ask any questions!

Back to Blog