Giacomo Balli profile picture
Giacomo Balli
Innovation consultant specializing in mobile strategy
Let's Chat

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:

As usual, feel free to ask any questions!

#css, #html, #javascript, #phonegap, #replicating
Published: Fri, 09 May 2014 18:25:05 +0000