As well as moving in unison, multiple dots can move on random paths. Here we hid a little Harmoney smile as a moment of surprise and delight. Only do this when it’s not cheesy and not for an outward facing piece of design, such as here in the customer funnel process.

Congratulations

We can also track a dot up close moving along a path. This is a hypnotic animation that passes
the time for the customer and signals the security of the AI intelligence evaluation.

Intelligent review

Bespoke animations express a key idea of the brand. We can animate our dot in different ways, as long as it is used to make a visual metaphor. Have a look at the below examples as a starting point for your own creations, and remember the sky’s the limit.

Bespoke animations

Start Fresh Loans is our debt consolidation product. This
is all about simplifying, making things easy to manage—combining multiple bits together. There is
a feeling of finesse, “spring cleaning,” tidying to spark joy.

Start Fresh loans

Start Now Loans

The parallax scale technique is handy when don’t have footage of people. If we’re using a portrait photo, we apply a ken burns effect to bring the image to life a bit.

The scaling anchor point should be slightly left and below from the focal point—the person’s face. Keep to a subtle effect. Use this formula to calculate:
The increase in size (%) = the duration in no. frames/100. For example, the default is 2.5% scale increase every second (for a 25fps animation).

Image parallax

Wide

Shifting container

Square

Tall

You know by now that we like our buttons, and we can build off their visual motif at a larger scale. These are used as holding device to sequence and reveal information in digital banners. Only use one container to split the banner in two. The curve must fit to fill the width of the banner (the corner radius is 50% of the shortest side, so is a half circle). They always shift left to right or from bottom to top—keep on moving forward or moving on up!

Money is in our name. Figures, big and small, in dollar signs and percentages and more, are throughout all of our communications. A counter can help explain a number range, or be animated with a graph to signal data like the NPS score.

Net promoter score

Personal loans amount

Number counter

Typing paragraph

What to do? Start almost anything, and here are some of the things you can do! Our text scroll ticker animation flicks through different possibilities,
before bouncing to the choice set to become reality.

Specific: horizontal

Start your
bedroom renovations

Specific: vertical

Start your renovations

Generic: horizontal

Start your
renovations

Generic: vertical

List scroll

We talk the walk—we’re your helping hand, the motivational coach, your inner voice. Just like our button logo, our language speaks to the intent,
our mission, to get started.

Multi: horizontal

Multi: vertical

Single: horizontal

Single: vertical

Start statement

A great rate analysed for you.

Shifting type

Button animations are used to communicate a call
to action. They follow the same Harmoney logo animation (also a button); to link the brand name/logo to the user action. The looping arrow is a device to encourage interaction. The button can transition
to a second state animation when clicked. Like in the application funnel, where a loader is used for the waiting/processing time.

Verifying identity

Start here

Buttons

Think of these as our lego pieces, but instead
of colourful bricks they’re buttons, icons, and typographic moves. Use as many as you need in
any combination. They can be reconfigured with
the appropriate information or reformatted for different sizes.

The following examples show how multiple building blocks can be used together to make an asset.

The building blocks

This animated web banner uses: shifting type, parallax image, and a shifting container.

This animated TVC uses: the Harmoney logo,
List scroll, Start statement, Number counter, and
a call to action Button.

Ask yourself these questions when considering using motion: 
Q. What am I trying to communicate or illustrate?
Q. Can this be created from building blocks in the motion toolkit or is this a concept that I need to create a custom animation for?
Q. What is the best motion behaviour/s for this?
Q. And what are the principles I need to apply to  my animation?

Implementation

Download bespoke animations

Download building blocks

Resources

We’ve made a system of bespoke and building block animations. Start using these for ease and flexbility.

CONTENTS

Gradients and shadows