CSS iPhone with the Pokemon GO Animation built in Webflow!

Community resources Show & Tell
1

Alright guys, I had a free day today so I decided to try something fun!

I was watching the most recent Webflow livestream with @PixelGeek and seeing him mess with the app and talking about how it relates to good UX inspired me to recreate it in Webflow.

Features:

  • No custom code
  • A mix of interactions, screenshots and GIFs of my actual iPhone screen
  • And more, check it out yourself

LIVE Link: http://pokemon-go-animation.webflow.io

Tools used:
Background music: Youtube and iMovie
GIF Background: LICEcap and Quicktime Airplay for Mac
Icons: Flaticon (The poke-ball and phone use no icons)
Loading Screen: Built in Apple screenshots and Webflow interactions
Profile and Nearby Sections: Affinity Designer

LIVE Link: http://pokemon-go-animation.webflow.io

Preview Link: https://preview.webflow.com/preview/pokemon-go-animation?preview=409cc9128391c673c71eb0579f9179c7

Have a great day :smiley:

9 Likes
2

Wow! Very creative! I really like animation when you click on the poke-ball :slight_smile:

3

Thanks! Eventually I want to make the menu buttons work as well. But I could resist posting this first edition.