Animations

One of the biggest challenges of creating app animations is the absurd difficulty of recreating them in code. Most animation editors allow the creation of complex animations only to discover that they are nearly impossible to code. This difficulty lies in the differences between design editors and real apps:

  • Animation editors animate design layers, which are not present in the final product
  • Animation editors usually interpolate the initial and final state of screens. This is completely disconnected from how software is done, where animations always change properties of code components based on their timing and are invoked by actions that call them, like tapping on the button
  • Animation editors have no resemblance of platform limitations, if there are any - by allowing to create things that are impossible to code, they also allow for the production of unusable results, leading to a large amount of time wasted on the constant back and forth
  • Lastly, animation editors have no resemblance of the targeted output platforms and the properties are usually incompatible with the code. For example, physics-based animations behave very differently on each platform and they are not smart enough to do proper conversion based on the platform rules

We have long craved for an editor that would fix all those problems, and so we created one. Supernova boasts state-of-the-art animation editor where everything you create always produces a real, valid production code, making the life of both designers and developers significantly easier.

Inline editing of animations inside Supernova animation editorInline editing of animations inside Supernova animation editor

Inline editing of animations inside Supernova animation editor

Basic Concepts

There are few basic concepts worth talking about before we dive into how to actually create animations:

  • Triggers - Trigger is a component that invokes the animation. Triggers can be anything that user can interact with. Each animation has exactly one trigger, with the exceptions of animations that should play at the load of the screen - those don't have any trigger
  • Components - Every component in the component tree can be animated
  • Animated Properties - Every component consists of attributes like shadows, borders, background color and so on. When animating, you change the values of those properties at certain timepoints - keyframes
  • Keyframes - Signify one point at the time of animation where values are recorded. Animations are then interpolated between those key points. For example, to create fade-in transition you'd create 2 keyframes, the first one at the beginning, the second one at the end, and set opacity values to 0 and 1 respectively. The animation is then interpolated between those 2 points
  • Animation Chains - The entire animation doesn't have to be limited to just one component, you can animate multiple ones. Animation trigger is then what groups those animations together (when you click on the button, it will play any animation connected to it at the same time)

Creating Animations

To create an animation, you first define its trigger. Select the component you wish to use to invoke the animation, right-click and select trigger animation. This creates an empty animation ready to be filled with all the beautiful transitions.

Using button as a trigger for our future animationsUsing button as a trigger for our future animations

Using button as a trigger for our future animations

Creating a trigger immediately opens the Animation Editor. You can close the animation editor by clicking on exit animation. You can then reopen the editor by selecting any animation from the list of components. The component list always shows only animations specific to the selected screen.

🚧

Creating on-load and on-appear animations

On load animation (when a user sees the screen for the first time) and on appear animation (when a user comes to the screen, even using back button) can be created by creating any trigger from any component and then changing its trigger in the right panel to "none". We are currently implementing a better way to do it.

But empty animations are not exactly exciting. Select the component you wish to animate and it will be immediately added to timeline without any animated properties:

Selecting the same button will now make it animatable as well as being a triggerSelecting the same button will now make it animatable as well as being a trigger

Selecting the same button will now make it animatable as well as being a trigger

There are 2 ways how to animate the component - by using custom animations, or creating one from predefined template animations. Let's explore them now.

Custom Animations

Custom animations allow you complete control over how the animation looks like. They are very useful when you want to go wild and create complex animations, such as transitions, chained animation and similar. To create custom animation, either right-click the component and select add custom animation > type or click + add > type in the timeline itself.

Following properties can be animated:

Geometry

  • Move X, Y - will move component on X or Y-axis
  • Scale X, Y - will scale component width or height
  • Rotate X, Y, Z - will rotate component on given axis. Z-axis rotation is used to rotate element visually in a percieved 2D plane, while X and Y-axis rotation will flip the component horizontally or vertically

Style

  • Opacity - Opacity ranging from 0 to 1, usually used to fades and transitions
  • Corner Radius - Corner radius of the component
  • Border - Border around the component. The border allows you to set color and width dynamically
  • Shadow - Shadow under the component. There are many properties of shadow like colors, intensity, and radius which allow you to achieve a lot of interesting effects
  • Background Color - Background color of the component. Some components don't have a background color and this option will not be available

Once you select which property you want to get animated, it will be added to the timeline and you can set its values using keyframes.

Animation with one added property. 
Now the only thing left is to set the values using keyframesAnimation with one added property. 
Now the only thing left is to set the values using keyframes

Animation with one added property.
Now the only thing left is to set the values using keyframes

Template Animations

There is also a quick, convenient way how to do the most common animations - using template animations. Right-click the component and this time, select add template animation > type > subtype. Once you select the option, animation including all the keyframes will be created for you. You can of course further customize it through the timeline as well.

Selecting bounce animation wil immediately add scale and opacity properties with prefilled valuesSelecting bounce animation wil immediately add scale and opacity properties with prefilled values

Selecting bounce animation wil immediately add scale and opacity properties with prefilled values

Keyframes

Keyframes are the way how to tell the animation that value will change in a specific time. One keyframe contains exactly 1 piece of information always specific to that animation property. For example, when you create a keyframe on the background color and select it, you'll be able to change the color for that specific time. In order to change different property at the same time, add keyframe corresponding to that property.

Creating keyframes

You create keyframe by dragging the red line (signalizing current time) to the desired time and right-clicking the property row where it intersects with it. This will bring the menu with only one option add keyframe. When you add a keyframe, it locks its state to the specific time.

Removing keyframes

Removing keyframe is equally easy - again, right-click the keyframe and the option to remove keyframe will be presented. Select it and keyframe will be done. If the keyframe was between other ones, Supernova will interpolate between two nearest ones again.

Moving keyframes

You can move keyframes freely on the horizontal axis. Hover over the keyframe and then drag it where you'd like to move. If you also shift-select multiple keyframes and drag them all at once. Lastly, you can select multiple keyframes by creating selection rectangle around them.

Changing keyframe properties

Simply select the keyframe in the timeline and look to the right panel - there will be two options specific to that keyframe:

  • Time - Specific time in seconds when the keyframe value gets applied
  • Value - Keyframe value specific to that property (can be color, number and so on)

Properties

When adding any property, you can configure advanced variables to make some really nice effects that would be hard to achieve otherwise, like reversing the animations, repeating them and so on.

Select the property in the timeline to reveal its configuration panelSelect the property in the timeline to reveal its configuration panel

Select the property in the timeline to reveal its configuration panel

Specifically, you can set the following:

  • Begin Time - Time of the first keyframe. If you change the begin time, all keyframes will move by that value
  • Duration - Total duration of the animation. If you change the duration, all keyframes will automatically reposition using the set ratio
  • Repeat Count - Number of times the animation will repeat itself before stopping
  • Autoreverse - When the animation is set to repeat (meaning the repeat count is larger than 1), every odd animation cycle will play in reverse. This is great to achieve things like bounce, glow and so on.

Finally, you can set the animation timing function. Timing function signifies how the values change over time. By default, the animation plays as ease-out, but you can select from many options including creating completely custom ones.

Timing can completely change the feel of the animation. 
Play around with what you think is right, preview immediately adapts to your configurationTiming can completely change the feel of the animation. 
Play around with what you think is right, preview immediately adapts to your configuration

Timing can completely change the feel of the animation.
Play around with what you think is right, preview immediately adapts to your configuration

Testing

In order to test the animation, you have multiple options:

Manual timeline testing
The first one is to simply drag the current time (the red line). This changes the preview even in edit mode to show you the state of the animation in the exact time. This allows for precise debugging of animations down to a single frame.

Playback testing
The second option is to play the animation using the timeline controls. Timeline control are located at the top of the timeline. You can start, restart and pause the animation, and the speed option allows you to slow it down to see possibly overlooked details.

Live mode testing
The last option is to switch Supernova to live mode - the simulation. In this case, you are free to click around in the screen itself. Tapping our newly enhanced button will invoke the animation and play nice bounce animation.

👍

Pro tip: Chained animations

You are not limited to one component in one animation. You can select another one and either add custom animation or template animation in a same fashion. Animations to those components will be triggered at the same time, but you can also play them in sequence - simply by moving the keyframe begin time to later time.