Working with motion in digital product

Motion becomes essential for your digital product

We all miss the days on working with flash, but we don’t miss the flash website. Today it seems the digital design industry thrives with experimental concepts in different areas. From the modern design tools to the refined design sprint collaboration. Yet, digital designers don’t settle here, we want to make things move, and most of all, we want to make movements which provide the user a better and more enjoyable experience. Naturally, as the project size and complexity grows, new features and ideas always come with their own baggage. After a few year working with motions in digital product design, I would like to share some of my thoughts on why motion design becomes more and more important for the digital product.

First thing first, there are some challenges by including motion design in your digital product. Especially if you are working with motions in the browsers.

• How to manage animations on a scalable project
• Reusability
• How to manage multiple timelines in animation sequences

Then there is different types and functions of motions in digital product

• Micro-interaction aims at providing a better user experience.
• Animation sequences which keep user engaging during idle time. This can be page load animation, First time onboarding waiting for animation.
• Animation sequences help the user to map and orientate the digital product’s virtual space. This kind of animation is often been overlooked, yet most of the time, they will have a major impact on the user’s experience.

not every digital product needs to include all 3 different types of motion at the same time, they should only be used to enhance and improve the product experience

Different approaches to design and implement motion design in browser based digital product

So how might we as a designer can work with motion beyond our sketch prototype and Adobe After Effect? Even sketches prototype nor Adobe AE are not the best tools to the answers to those three challenges, I still strongly recommend them, especially if you are working very early in the concept development. But if you really want to move beyond the concept development to live prototype or even production-ready code, there are mainly these 3 basic approaches.

• CSS keyframes animation
• manipulate DOM element’s properties by using javascript
• Using SVG animate attribute(I will keep the SVG animation for next time.)

The animation in CSS

In fact, you can both use transition and animation properties to animate the DOM element, I will focus more on the animation part at this time.

To use a CSS animation, you have to declare the @keyframe first, and then attach the @keyframe to the element you want to animate. css @keyframe menuStripeFadein{ 0%{ opacity: 0 }, 100%{ opacity: 1 } } After declareing the @keyframe, then you can use it anywhere in the css css .menu__stripe{ animation-name: menuStripeFadein; animation-duration: 0.5s; animation-fill-mode: forwards; animation-timing-function: ease; animation-direction: normal; } They both comes with its own up and down sides. If you are not familiar with the css animation’s property, here is the perfect place to set you up. You can add as many steps you want between 0%, 100%, eg. 20%, 30%. So the css animation is not hard to understand at all, and within 2 steps, you are set to make your design live. So it is easy to get started, but hard to scale up and maintain. Plus, I think it comes with one major drawback. That is the refined control of timeline, and control is essential for complex and meaningful motion design. If you want to change the color of a button when you hover or animate a burger menu, you can just do it with the CSS animation or transition. But if you want to tell a story, and trigger users with inspiring motion sequence, the CSS animation may become hard to achieve them for the project.

The CSS animation is not as intimate as javascript animation for a designer, or any one just started to code. Thus gives it a much popularity among the design community. Although I have my speculation on how sustainable it will be when the more and more component based programming principle takes the mainstream.

The animation in javascript

The javascript, on the other hand, has a more complicated story. A lot of the timeline manipulation methods are widely used in different languages, from ActionScript in flash, to the timeline in processing. But a steeper learning curve keeps a lot of designer from experiment it on their design (although there are more and more tools like framer allow a designer to experiment the javascript based animation without complex configurations. I will try to cover the tools in my next post). So the javascript is still considered as the tool for the ‘developers’, and not as the preferred tools for designers. Although I really want to argue it should be another case, by 3 points. 1. By applying javascript to your design can solve a lot of the challenges the motion design brings up in today’s digital product. 2. Most importantly, it enables design team owning a complete part of digital product design, from visual to interaction and the user flow, so the design quality depends on less on other deliveries. 3. Plus, if it is used in the right way, it will cut a lot of unwanted deliveries, and improve the team’s productivity.

Working with animation in Javascript

You can manipulate the timeline of the DOM element by using requestanimationframe, Benjamin from stripe has just published a great post on Medium, you can read more about it. The requestanimationframe allows you build your own animation functions from the bottom up, so it is a very powerful and also complex method to jump right in. But there are a lot of plugins to help you do the heavy lifting. One of my favourite is GSAP. It packed tons of features to reuse your timeline, maintain your different animation sequence and scale your motion design in your digital product. There are many ways you can use GSAP, so this is just my way to use it.

1 - First you can declare an animation sequence

javascript TweenLite.fromTo('.el', 0.2, { opacity: 0 }, { opacity: 1 })

2 - After you doing that, you can wrap it into a function and then you can reuse this animation sequence anywhere in your javascript, it is also a more functional way to write your javascript, if you haven’t heard the pure functional javascript, you can watch this youtube clip

javascript let myAnimation = (el)=>{ TweenLite.fromTo(el, 0.2, { opacity: 0 }, { opacity: 1 }) }

3 - If you are familiar with the commonJS, then you might want to pack this into a module, so you can reuse it anywhere. After that is where the fun comes in, in GSAP you can chain you tween to an animation sequence; and by using .play(), .pause(), .reverse(), now you really gain a refined control over your motion design. ```javascript // create a timeline function with variables, so it can be reused in different cases let myMenuSeq = (elA, elB, callback)=>{ let tweenA = TweenMax.fromTo(elA, 0.2, { opacity: 0 }, { opacity: 1 }) let tweenB = TweenMax.fromTo(elB, 0.2, { opacity: 0 }, { opacity: 1, onComplete: ()=>{ callback; } })

let animation = new TimelineMax()
                    .add(tweenA)
                    .add(tweenB)
                    .pause();

return animation

}

// use yout time line anywhere const myMenuStripeA = document.querySelector(‘.menu .stripe_A’) const myMenuStripeB = document.querySelector(‘.menu .stripe_B’)

myMenuSeq(myMenuStripeA, myMenuStripeB).animation.play();

```

The above examples only provide the basic principle on how I use gsap in some of the projects. But it is the bread and butter for how animation is conceptualized and build, by manipulating elements’ properties in different orders.

What does this mean for your digital product, and your design team.

It is only good news for your next digital product because now the motion will not only be something just to be added at the last stage. The motion design is becoming, not if already are a core design element, so we shouldn’t take it lightly, nor abuse it on every corner of the interface. Now it is time to really leverage its unique design attribution, so we are not going to remake just another slideshow effect. As for the design team, it is always time to start and reinvent itself. So choose what ever tool feels the most comfortable, open up your Adobe After Effects, so you can learn the basic concept on Tweening; or try to make your first button hover transition, so you get comfortable with different properties in DOM element. Working in small steps, and slowly build up the design team’s capacity on understanding how actual code can affect your design concept. After more and more companies start to put their motion guidelines in their own core design system(Google, Airbnb, Facebook), the VR/AR, AI/ML might be the next sexy design playground, but the motion design is here to stay, so snuggle in and get comfortable with it.