Beautiful little hidden, contained product moments that revolve around a single use case. Micro-interactions may not always look the prettiest (the best of them may even go unnoticed) but they can be the difference between a user achieving a task or not.

Be consistent, purposeful, and guiding. These are the 3 things I always consider when adding animation to a site design or app.

Multiple interactions or animations happening at once will detract the user from the goal at hand. Decrease the users mental load time. Create a system or a few rules or interaction types. This will reinforce a users understanding rather than confuse the situation.

What is the goal for your user? How can the animation/interaction 

 to that purpose? Communicate an intended purpose. If animation slows down an experience or increases the users mental effort, it isn’t helping.

Make these experiences lend to the storytelling. What is your user doing and how can the UI help guide them? Purposeful and guiding animation can help draw the users attention to what is happening and compliment the understanding, while reducing confusion.

Let’s take a look at some examples and why they are successful:

 Keep the user informed through feedback and validation. Increases engagement.


 Provide the user with action/reaction. Delightful. Immediate feedback.


 Keep the user informed through status. Creates user engagement. Builds trust and confidence in the process.


 Communicate change. Draws the users attention to important details. Creates visual hierarchy.


 HAVE FUN. Explain a concept visually. Hone in on a users emotion. Be empathetic in your design while still complimenting user flow/storytelling.

In conclusion treat your user the way you want to be treated. Design with empathy and consideration of how people will interact with your product. Know your user and create facilitators for that specific audience that will save them time and resonate with them. Do so by creating opportunities to engage and by paying attention to the details … Your user and your product will thank you later.

UX / UI

Animation

The Role of Microinteractions in Successful UX

SVGs are awesome – they can be targeted and customized, animated, styled and always stay great looking. Animating them can sometimes be a pain, especially when you want to “morph” one SVG into another. However, the GreenSock library is here to help.

GreenSock is a JavaScript library that creates “ultra high-performance, professional-grade animation for the modern web” . With it, you can create all kinds of effects with ease, such as having 

Think of GSAP as the Swiss Army Knife of javascript animation…but better. It animates anything JavaScript can touch (CSS properties, canvas library objects, SVG, generic objects, whatever) and it solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery), including automatic GPU-acceleration of transforms. Most other libraries only animate CSS properties. Plus, their sequencing abilities and runtime controls pale by comparison. Simply put, GSAP is the most robust high-performance JavaScript animation library on the planet, which is probably why Google recommends it for JS-based animations and every major ad network excludes it from file size calculations. Unlike monolithic frameworks that dictate how you structure your apps, GSAP completely flexible; sprinkle it wherever you want.

Greenstock offers different plugins to extend the base functionality, such as TextTween and ScrollTo. One of the plugins is 

, which can animate SVG paths to have a smooth transition between SVG elements. It works by “adding enough points to … get a super smooth morph. It will rip through all that ugly path data, convert everything to cubic beziers, and dynamically subdivide them when necessary, adding points so that the beginning and ending quantities match (but visually it looks the same)”.

Using MorphSVG is pretty easy – just pass the IDs of the SVG paths that you want to morph (you can also pass polygon points and path strings).

One thing to note is that you can only morph paths and polygons, however MorphSVG can convert other elements (such as circles) into paths. To do this, it’s simply just passing an ID to convertToPath – pretty easy!

, we used MorphSVG to animate the different faces of the character Benjamin.

Our design team created a series of SVG illustrations that represented the age of Benjamin in each chapter of the book. Every animated component (facial features, hat, etc) is in it’s own SVG path element; Green Sock allowed us to morph the shape of these paths to the corresponding path in the next illustration

We are passing on the next SVG path (tag) along with animation time (

 – “factor that’s used to scale time in the animation”, its comes with GreenSock).

The SVG of a face kinda look like this, with all the different facial features being different paths and sections, all with IDs so they can be targeted.

This all can be used to where the face goes from stage one to stage two and the elements morph during the transition, all thanks to MorphSVG and GreenSock.

Frontend Development

PHP, Javascript & React

SVG Morphing

Social Media & Audience Development

Marketing Campaigns

Art Direction

Culture

VIA Studio Social: Starch Madness

Animation and movement has never been more important than right now. From 

​ to character animations to the most subtle of UI microinteractions, it breathes life into branding and design, while providing subtle information to users. It's just another tool in our toolbox, and one we love experimenting with - what can we help you animate?

Animation

Animation: Case Studies

01

VIA Studio Social: Starch Madness

Animation: Blog Posts

The Role of Microinteractions in Successful UX

SVG Morphing