Animations

Last updated: Jul 11th, 2017 (for version 0.7)

Value of animations

Well thought-out animations with very specific purpose add lot of added value to your applications. It makes the user experience feel crafted, tailored to them. From the amazing Medium article about animations written by Nick Babich - "Animation in mobile apps has a clear, logical purpose. It reduces cognitive load, prevents change blindness and establish a better recall in spatial relationships. But there is one more thing. Animation brings user interface to life.".

It is undoubtfuly true that when comparing two of the same apps, where one has animation and one doesn't, user will immediately like the one animated more (assuming the animations are any good, of course). The issue with animations is that they take a long time to get right through the code - so we've create an animation engine atop of Supernova that you can immediately use to bring all the native components to life and preview them directly in the studio.

Creating an animation

Creating the animation is very easy - you can right-click component that you want to invoke the animation and add a new animation, either from template or completely custom one. Supernova supports basic, spring and keyframe animations, for both iOS and Android. You can find all the animations for the selected screen in the left panel.

Let's look at how you can bounce-animate your buttons when user taps them directly in the studio with just 2 clicks. Once you export the screen, all the code will get generated for you, using the native frameworks.

Creating a new template animation in seconds

From a template

Supernova supports basic templates from which you can work on your next animations. Right click the component you want to animate in the interface and select Template Animation > style > direction. Those animation are fully configured, including timing and the properties to create them. We will be adding more templates and also allow the users to share the templates with themselves soon. For now, you are able to pick from the following animation bases:

  • Bounce In (basic, up, down, left, right)
  • Bounce Out (basic, up, down, left, right)
  • Rotate In (basic, up, down, left, right)
  • Rotate Out (basic, up, down, left, right)
  • Slide In (basic, up, down, left, right)
  • Slide Out (basic, up, down, left, right)
  • Zoom In (basic, up, down, left, right)
  • Zoom Out (basic, up, down, left, right)

Custom

When you need to do something little more oomphy, you can use the vast range of configuration of the custom animations. To add custom animation, right click the component you want to animate in the interface and select Template Animation > style > direction.

There are 3 levels of "objects" that you control. Animation Groups, which allows you to connect multiple components to one single animation, Animation Elements which correspond with the animation of one component and Animation Properties, which correspond to one animation property that changes over time.

Timeline

Animation timeline is where you test your animations. You can move the time to any point of the animation and see how precisely the component looks, immediately in the preview. You can also let it play indefinitely, which is useful to test the animations that repeat multiple times or never end.

Animation timline
screenshot

Animation timeline has 3 main parts - The components, the draggable properties, and the animation controls.

The components

The component part of the animation timeline presents you a list of components (and groups, and properties) that participate in the single animation. Each animation can have multiple components, and multiple properties, but it can only have one component that invokes it (more on that in the Chaining section).

The draggable properties

Every property that you animate on the component will show up in the middle area, that is scrollable and where you can drag them left or right, or rescale them. This gives you quick access to the timing aspects of the animation, down to the last property.

The animation controls

The animation controls give you overview of the state of the animation, and also quick access to play, replay and stop / pause functionality. The red line above the properties marks the time in which the animation currently is.

Animation Groups

We've developed the animation engine so it is extremely easy to understand and use, and it builds on very simple principles that mirror how you logically think about the animation. Each animation can be described in a following manner:

You invoke the animation either by some action (tap, swipe) on certain component of the app, or they can run immediately when the screen loads. Each animation can have multiple components that somehow change, and they change the properties - like background color, scale and others.

The basic building block of the each animation is an animation group. This is the container that encapsulates what components participate in the animation, and what component (if any) invokes the animation. Each animation has precisely one animation group.

Animation Group
screenshot
Animation Group properties
  • Name - You can name your animation. That's it, yeah.
  • Triggered by - Component that invokes the animation. Cannot be set for on load and on appear animations.
  • Trigger action - Action or event that invokes the animation. You can pick from multiple types:
    • On Load - Animation will run immediately on screen load, but will not replay on each visit
    • On Appear - Animation will run immediately on screen load and will replay on each visit
    • Tap - Animation will run once the user taps the specified component
    • Double Tap - Animation will run once the user double-taps the specified component
    • Swipe Left - Animation will run once the user swipes the specified component to the left
    • Swipe Right - Animation will run once the user swipes the specified component to the right
    • Swipe Up - Animation will run once the user swipes the specified component up
    • Swipe Down - Animation will run once the user swipes the specified component down
    • Drag - Animation will run once the user drags the specified component around
    • Pinch Open & Close - Animation will run once the user pinches the specified comp
    • Long press - Animation will run once the user long-presses the specified comp

Animation Elements

Animation Element is a representation of one component participating in the single animation. Animation Element can contain multiple properties that change the visuals of the component.

Animation Element has its own timing. The duration for which the component animates is calculated as a < minimum, maximum > of times of all the properties that animate. Element has its own delay - you can set it to delay the animation of specific component to run later than at the beginning. This is how you create the Animation Chains. You can have unlimited number of components in any animation.

Animation Elements
screenshot
Animation Element properties
  • Animation Anchor - Each component has its own pivot around which the transformations are made. You can set it there.
  • Fill Mode - Component that invokes the animation. Cannot be set for on load and on appear animations.
    • Removed - Component state will not get affected by the animation, if the animation is removed
    • Forwards - When application finishes, component properties change to those of animation
    • Backwards - When the animation is added to a component, it changes its state immediately
    • Both - Animation will behave as if forwards and backwards are enabled at the same time
    • * Note: To put this simply, this variable decides whether the animation can change the UI state of the component before and after it plays. If the animation would have 10 second delay and you set it to "Backwards", the initial state of the animation like 0% opacity will be set for those 10 seconds before it runs as well.

  • Timing function - Ease-in, out, custom etc. When set, overrides timing functions of all properties
  • Begin time - The initial delay of the component animation after it is invoked
  • Duration - The time required to run all property animations. When changed, rescales the properties
  • Repeat count - Allows to repeat animation X times. Set to 0 to disable repeat
  • Autoreverse - When enabled, if the animation is allowed to repeat, it will play backwards for the second time

In Development note:

Currently, only components can be animated, but we are already preparing the system to allow animations for the screens as well. We will notify everyone once it rolls out, but we can safely say it will be done before the actual release.

Animation Properties

Animation properties represent what change when you run the animation. You can animate most of the design properties that you can set within Supernova as well. This is the complete currently supported list:

  • Bounds, Frame
  • Background Color, Opacity
  • Border Color, Border Width
  • Corner Radius
  • Shadow Color, Shadow Offset, Shadow Radius, Shadow Opacity
  • Rotate, X, Y, Z
  • Translate, X, Y, Z
  • Scale, X, Y, Z
  • Position

Animation properties have their own timing similarly to the elements, but it always represents only one property. There are 3 basic types of how the property can be animated. Using the basic interpolation, spring (which adds physical feel to the animation) and keyframes, which allow you to do more than initial and end state. It is up to you what you use, as all the properties support all the modes.

Animation Properties
screenshot
Configurable properties

The list of properties you can set changes depending on the type (basic, spring, keyframe) of the property. Let's go through it.

Animation Types

Basic

Basic animation uses the interpolation function that you set within Supernova to transition from the initial state to the final state. Each basic property animation allows you to set:

  • From - If set, the animation will start from this value. If not, it will take component's current value
  • To - If set, the animation will end with this value
  • By - If set, the animation will transition to calculated from + by value

Each animation has different data that you can set, so the color will give you color pickers to play with, borders will be as numeric values and more.

Configurable properties
  • Timing function - Ease-in, out, custom etc. Changes how the animation value will change over time
  • Begin time - The initial delay of the property animation after the component animation starts
  • Duration - The time for which the property animates
  • Repeat count - Allows to repeat property change X times. Set to 0 to disable repeat
  • Autoreverse - When enabled, if the property is allowed to repeat, it will play backwards for the second time

Spring

Spring animations can be configured similarly to basic animations, but add "springiness" to whatever you animate. There are extra properties that you can set to change the dynamics of the animation.

Configurable properties
  • Stiffness - The spring stiffness
  • Damping - Defines how the spring’s motion should be damped due to the forces of friction
  • Mass - The mass of the animated object. The heavier the object, the higher forces it requires
  • Initial velocity - The initial velocity of the object attached to the spring

Keyframe

Keyframe animation is configured differently from basic and spring, because it does not have from, to and by options. Instead, you can create as many keyframes as you want, which values will then get interpolated depending on the timing you set. In the example below you can see that one animation will animate value of the component scale from 1 to 0.5, 0.2, 0.5 and finally 0.

The key time specifies when exactly to run the keyframe relative to the duration of the animation - so if the animation has 10 seconds, it will run in 0, 2s, 5s, 5.5s and finally 10 sec where the animation stops.

Example of scale keyframe animation
screenshot
Configurable properties

The keyframe animations configure the same as the basic animations. Keyframe animations cannot be spring animations at the same time.

Chaining

You can chain multiple components to an animation that starts from the beginning. Use right click on any group to add more components to it and play with it, to create really stunning effects, both on action or when the screen loads.

Chaining magic

Advanced animations

Sometimes those animations are not enough. Supernova covers most of the basic animations but for the truly complicated animations you will probably need something like Adobe After Effects. We've added support for the Lottie library from the amazing people over at AirBnB, because we love it - and with it and with the power of Supernova's animation engine, you can truly create anything you want.

That's it, you've mastered animations! Here, on us. (is it an addiction?)

Now that your application booms with life, you should add navigation so your users can enjoy it on multiple screens.

Spread the for Supernova - the world's first true design-to-code platform.

AppKit Theme

Enjoying the Supernova?

Thank you for your interest in Supernova. Would you mind to spread the ? Supernova is free in beta, for everyone.

Our goal is to help all the developers out there - and we want everyone to know what we are trying to achieve. We can only do that with your help.