Maple Motion Design
A month ago, Maple asked me whether I can make a simple line animation for both their website and iOS. The animation needs to be created by vector graphics, meaning SVG in web and CoreAnimation in iOS. After reviewing the designs and feeling their passion of perfection, I took the challenge.
For the web version, I chose After Effects with BodyMovin ( a plugin which export shape animation into svg graphics ). BodyMovin is still in beta, one issue I experienced is that, when one path transforming into anohter, both paths should have the same number of anchor point, otherwise, the BodyMovin will fail.
Screenshot of Affer Effects
For iOS version, I used QuartzCode. QuartzCode's interface is very simple, it reminds me of Flash sometimes. Overall it works, however, there are some small issues always bug me, such as, it's not allowed to move multi paths on the timeline at the same time. Also, if one path animated more than once overtime, you better duplicate it, since when you apply an ease or custom animation, it applies to the whole lifespan of the path, which is very annoying.
Screenshot of QuartzCode
It has been a great collaboration experience with the design team at Maple. Here is a version of the full animation made in After Effects.
