A sphere animation for sharing with millions of users

Visual Artist

Creative Director

Motion Designer

Adobe Illustrator

Jitter

Final animation integrated in the UI

Finding an app that enables creators and teams to easily design stunning animated content and interfaces is not easy. That's why discovering an application that makes creating animated content for presentations more attractive has been one of my most valuable discoveries.

Jitter

is, above all, simple and effective, and the best part is that its plugin is perfectly integrated with Figma. Therefore, creatively using its features can make a difference in the results. Over the past few months, I have pushed the limits of this tool to the maximum, while also being an active member in its community, leading to increasingly participative conversations with its developers.

Jitts, Jitts, and more Jitts!

The sharing-globe was an icon of the application, the animation that appeared in the interface when any user shared their files so that other community members (over +200K Figma users using their Plugin) could remix and learn from their animation process. Undoubtedly, it was fantastic, but it was developed within the application itself in a 2D context. In collaboration with their team, I had the opportunity to create the new exciting animation for JITTER's file sharing pop-up, just by using their app features in a creative way.

A creative Solution

Using only the functionalities provided by the application, we started with a sphere with a solid border of 3px and a height and width of 1000px. Using their new RESIZE tool, we horizontally transformed it to have a negative width of -1000px. The problem arose when, at the midpoint of the animation, when the sphere had a width of 0px, it collapsed and disappeared for just 1FR. To avoid this eventuality, we created a MASK in the center of the composition over a vertical area covering 3px in width (like the sphere). This mask contains a vertical line also 3px in height that follows the edge of the sphere in its left-to-right movement, and only becomes visible at the central moment of the animation when the edge of the sphere collapses. This achieves a smooth movement and simulates 3D on a sphere in a model that only allows 2D animation.

Creative solution to avoid the collapse of the sphere at the equator of the animation

An incredible result

It may seem simple, but reaching a solution like this sometimes requires a great effort. Such was the success of this innovation that the developers of Jitter themselves proposed me to use the new globe animation integrated into their interface as the image displayed when their users share files with other members of the community or their teams.

Nice things happen when we move forward, and motion has brought about this successful collaboration with one of the most promising start-ups I've ever known.Keep moving!