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.
Page 61 – Sync Animation