The power of video, only better
Don’t you just love the feeling of being dazzled when you visit a website?! Sometimes there is this thing that catches your eye and draws you in. And then suddenly your internet connection is failing you. The animation is too heavy, your website is stuck. If only there was a solution to this problem... Oh wait, there is!
Fast, faster, bodymovin
Day in, day out, we are striving to set our designs on point. The creative team makes the most amazing animations for our social media clients, but when trying to implement them on websites, we often bumped into a wall. The size was too heavy, things weren’t as responsive as we wanted them to be. Luckily, to our team, every problem is just another new creative challenge.
Test case of the day: a responsive logo for IGEPA. We created a wonderful piece of motion design. Therefore, we relied on the power and the flexibility of Adobe After Effects, and a new way of exporting to get everything in code.
What does this mean?
We can use the talent of our motion designers to create kick-ass animations without them having to write code. Using video formats like .mp4 or .mov can make a website really heavy and coding animations from scratch is difficult and time-consuming. Now, with the help of a plug-in called bodymovin, we can convert visually designed animations into code automatically. To be more precise, animations are exported by default as .json files that use the lottie.js player that comes along with the plugin. You can render animations in the browser on svg, canvas and html. Which makes them (load) fast. Super fast.
That looks great, but is it responsive?
A good-looking animated logo is nice, however we wanted to push it even further. Why not make it responsive and add some triggers to it? For example: let the logo change in a thumbnail when you scroll down. And: let the position of your mouse or the position where you are on the site be the trigger of the animation. With the help of Lottie, an iOS, Android, and React Native library that renders After Effects animations in real time, we can now implement animations as easily as we use static assets.
And that's only the beginning. Within every project, we look for ways to improve the experience and the interaction. That's why we don't simply make websites: we make awesome ones!
The talents behind this project
Because teamwork makes the dream work.