The LastPass on-screen animations should move quickly – but not too quickly. Each message should be clearly conveyed without rushing or lagging. Movement, scaling, opacity, and rotation can be combined to fit the space best and create a more dynamic experience.

The aim is to breathe life into rigid forms beyond basic fading or scaling. The motion should be finessed to give a nuanced, realistic, and natural feel. Our focus should be on how the most important assets are highlighted and connected to the next moment, simply and fluidly.

---

Evolving the “typing out” effect animation, I wanted the movement to feel modern and fresh and still have a hint of the past. The line moves quickly and smoothly, bringing the text up effortlessly and ending with the three dots locking into place, settling to show that LastPass is easy to use and secure.

---

Triangle shapes should rotate from the center of the shape. I took care to optically align the center to ensure balance and avoid wobbling. Singular triangles should move in the direction in which one of the tips is pointing. Never against a flat edge.

---

Lines should animate in one direction from off-screen and follow the path out of the screen. Lines should always have a rounded cap (not a flat edge).

---

Find opportunities to move the image so it doesn’t feel stale and lifeless. Use scaling, X and Y movement, and easing.

---

Typography animation should feel effortless and smooth. As a rule of thumb, supers for video should be short and concise. When animating text, it should move left-right, up-down but never on an angle. When animating text blocks, you can animate each word up. But never by character.

---

---

How elements move depends slightly on what the element is. Photos and shapes can scale, change opacity, and rotate in a manner best fitting for the space following guidelines. The timing and duration of an animation depends on the size of the elements and the distance it covers. If there are several elements or animation stages, a clear-cut sequence should be defined. As few elements as possible are animated simultaneously. Movement, scaling, opacity, and rotation can be combined to create a more dynamic experience.