Angular Animation Basics
What kinds of Angular Animation are we talking about? I mean, I said a lot about using Angular Animation to enhance our user interfaces; but what exactly does that mean?
It’s obviously not enough to throw Angular Animation at our web page elements and hope it improves our conversion rate. That would be silly. Like every other aspect of design, what kinds of Angular Animation you use, and when you use them, must be carefully considered.
Let’s start by looking at the different types of Angular Animation typically used on the web:
Interface element animation
I don’t know whether this is the most common type of animation, though, at a guess, it probably is. And so it should be. This is, in my opinion, the most useful kind of Angular Animation that we have available to us.
Like I said in the introduction, this is the Angular Animation that lets your users know that their action (clicking, for example) has been registered. Their click was the catalyst needed to make something happen, whether that be navigating to another page, opening a sidebar or modal window, or sending an e-mail from your contact form.
That feedback isn’t just nice to have, it’s essential now, in this world of flat design. People need to know the difference between interface and decoration. Animating our elements in simple, and subtle ways upon interaction gives them the feedback they need.
It can be as simple as making button backgrounds change, or making them bounce. This category also covers the animations that make sidebars “slide” onto the page, and the ones that make modal windows inflate themselves into existence.
Waiting animations
And once again, it’s all about providing feedback to the user. These are the animations that you’ll show to the user when something’s happening in the background, and you don’t want them to freak out.
The utility of these animations was proven a long time ago, when graphical user interfaces were first invented. It started with the way the mouse cursor would turn into an hour glass, and progress bars, too. Apple introduced the “spinning beach ball of death,“ at some point, and windows showed files flying gracefully from one folder to another.
These conventions were adopted on the Web as soon as was possible, and with good reason. When people start to wonder what’s going on, they keep clicking, or tapping. It might be an expression of frustration. They might believe it actually makes things go faster.
Either way, telling your user what’s happening, even via a simple progress bar, can ease the mind considerably… even for those of us who’ve been using computers a long time.
Story-telling animations
Now story-telling with Angular Animation goes beyond cartoons. In fact, I’m not talking about those at all. Rather, some people design websites so that as a user interacts with them (for example: by scrolling down the page), animations are triggered which tell a story.
Some common examples are those pages that will show off a new product by “assembling” it before your eyes. Others play out more like a cartoon, with little characters following you down the page and everything.
IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course and get ahead.
Back to Angular 4 Tutorial Main Page 
