Unocero.com is mexican tech-news site in which we post articles on our site as well as a big amount of videos every week.
To enhance our impact in social media, we created a way to share the biggest news headlines in a quick GIF form. This daily GIF format uses Google's Material Design principles with some modifications that were made to optimize the filesize of the final product so it could be uploaded to social media sites like Twitter, Facebook and Instagram
The structure of the GIF was very simple. An intro/outro that showed the date and the brand in a way that could be looped at the end, and four news stated in a card for each with a picture and a title.
FAB
To maintain the branding through the animation the Unocero logo was used as a Floating Action Button (also known as FAB).
After hiding the Unocero type, the icon asumes its FAB attributes starting with an arc motion to the bottom right of the canvas while gaining a drop shadow in the process.
This uses an Standard Curve to move to its FAB position over the card.
Card
In every video there is 4 different news articles and each if these is structured in a Card. Each Card has two main components: an image and text.
The first card uses a Card creation animation in which it first expands on its full width before expanding to its full height.
Usually, the main image of Cards appear with an opacity change because the image is being loaded. In this case, because the image is loaded and to avoid the overhead of transparency animation, the image expands the same way as the card with its full opacity.
Even if the change in position is really small, the bottom anchor point of the Card image follows the FAB to end up with an image with a 16:9 ratio.
On the other hand, the bottom part of the card has a solid color based on the site's color palette with plain white text. The caption on the first card does have a really quick opacity change as well as an expansion relative to the overall Card size.
Exactly on the intersection of the image and the card color the FAB rests as an anchor to start the transition to the next card.
Transition
Normally, the transition that follows the FAB action is a ripple transition that dissolves at the end of the animation. Because the opacity animation would be heavy on the GIF compression, there was a need to make an adaptation of this transition.
To make a flat version of the transition I used two ripples. The first ripple introduces the main color of the next card and the second one reveals the contents of the new card.
Both of these ripples use an Acceleration Curve of "Ease In" as stated in the Material Design Guidelines.
This was all done using Affter Effects with some mockups and icons based on Illustrator. On AE the cards were divided on different attributes, mainly the image, color fill and the text of each card so it could be a project that could be easy to edit while maintaining all the motion details that come out of every slide.
