Page 61 – Sync Animation

I’ve played with CSS animations using keyframes and transitions, but didn’t know about SVG animations before. When Adarsh asked me about them, I read up on some SVG animation articles. I wanted to try and make an animation using image files. I didn’t have any SVG files to work with so I took a screenshot of a mock landing page for Trippeo. I chopped up the image into different elements (individual expense, phone with an empty screen, expense list, laptop with an empty screen) with good old Preview. I saved these pictures as PNG files.

I used CSS keyframes and positioning to simulate an expense syncing from the laptop app to the mobile app. To run the animation, a class called “running” is added to the laptop and the phone. When the class is added, the expense list slides down and a new expense expands in. I put a delay on the phone animation so that it would seem the expense is syncing from the laptop.

When the “sync animation” button is clicked, I remove the CSS classes and re-add them. In order for the CSS animation to show, I set a small delay between the removal and addition. I later read about a few more ideal methods to achieve the same goal: restart a CSS animation with a click. What an odd concept to clone the element, remove it, and then add it back to the DOM! I think one of the perplexing and interesting parts of code is how many ways there are to get to the same outcome.

Screen Shot 2015-07-27 at 5.29.58 PM

Page 61 – Sync Animation


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s