Lately we’ve been using beautiful web animations in our designs where they seem to fit. Animations bring life to the design and give visual cues for the user to digest important content. These motion sequences can be implemented using SVG animation, video or GIFs. All three formats have advantages and disadvantages:
- Although SVG animation through CSS keyframes has superb quality and is the only responsive solution, complex animations can be time consuming to create.
- Video provides excellent quality as well but may have issues when loading.
- GIFs eliminate load time concerns but have lower quality images.
So, how do we show off those attention-grabbing motion skills on the web without losing quality, increasing load time and making your favorite developer sweat? Bodymovin’ is here to satisfy designers, developers, and the scope police.
Exporting animations from After Effects using the free Bodymovin’ extension has our creative minds spinning here at Sagepath without limitations. Bodymovin’ creates a JSON file from After Effects. You can easily render this as a SVG animation, avoiding time-consuming keyframes. So, Designers rejoice! That beautiful, crisp piece of motion you created can transfer easily to the web just like you intended.
You can check out the Bodymovin' add-on at the Adobe Exchange.