Animating VueJS

In this talk Sarah Drasner, a consultant at different companies and a senior cloud dev advocate at Microsoft, explains the need to animate. From the perspective of performance! For many of us, especially developers, an animation is just a fancy and superfluous thing that amateurs spend their time on. However, here are some important facts about users on the internet.

1. User attention span is really short.

To be exact, it is just 2 seconds before a user decides to try something else. If someone forced themselves to wait for more than 4 seconds, they will develop a visceral reaction just like they would if they were watching a horror movie.

  • Amazon has discovered that for every one second delay, conversions dropped by 7%. If you sell $100K per day, that is an annual loss of $2.5m.
  • Walmart has found that it gains 1% revenue increase for every 100ms of improvement.

1. Perceived performance is the only performance that really matters.

The way we perceive how long certain request takes is really important and different from how long a certain thing actually takes. This is where customer experience comes in. Because benchmarks don't tell the whole story, the story of the psychological effects of animation. According to research by Viget, novel loaders have a higher time wait time and lower abandon rate than generic once.

Effect on customer experience with different loading animations

What is Saccade and why is it important?

How do users interact with your web or app? Using a method called Saccade. A saccade is a quick, simultaneous movement of both eyes between two or more phases of fixation in the same direction. In contrast, in smooth pursuit movements, the eyes move smoothly instead of in jumps.

showing saccade with hitmap

We've evolved to perform actions that flow more or less seamlessly.

This is because we are always remapping the space and the environment to minimize distraction. Our sensory memory works in 100ms bursts. So, as a result, we have thought our selves that everything that pops up on us is fighting and should be avoided.

Without a further convincing, she gets into the basics of working with Vue, how to use the component and some of its offerings to create fluid effects in the browser. she then moves into watchers, the reactivity system, and transitioning state. Finally, she talks about lifecycle methods, SVG, and pushing animations to the next level.

Subscribe for coding videos

Keep growing professionally with just three curated videos weekly.

We hate spam as much as you do.