Categories
CSS JavaScript

The Twitter animation

I like the Twitter animation that you see right when launching the iPhone app.

When you click the Twitter icon, the logo moves to the center of the screen and seamlessly transitions into the splash screen. Then the icon backs off a bit and shoots forward to fill the screen with white as the app fades in.

Very slick.

My version:
https://chriscarey.com/practice/twitter-intro/

Categories
Apple CSS Development iPhone JavaScript

iPhone interface with React

After reading about the new CSS backdrop-filter I decided to see how much work would be involved to create an iPhone like interface using HTML, CSS, and React.

Categories
CSS

An alternate animate.css animation order

Animate.css is a wonderful CSS animation library.

http://daneden.github.io/animate.css/

On the website, animations are grouped by types – “Attention Seekers”, “Bouncing Entrances”, “Bouncing Exits”, etc.

What I present is a revised order with In’s and Out’s grouped next to each other. This gives a nice effect when cycling through all the animations.

Categories
CSS

Flynn from Doom as a CSS sprite


Flynn from Doom as a CSS sprite
https://github.com/chriscareycode/doom-flynn-css