Web Animations
So... web animations. Sometimes web animations make a plain website feel premium.
And I don't mean those janky ones from the 90s or early 2000s, like flashing lights or a streaming marquee of text (although they have their time and palce). I'm talking about the little subtle animations that make a website feel a bit more alive - a little bit more interactive.
You know how you scroll down on a website and something slides up into view? Or when you hover over a button and it seems like it jumps up from the page slightly like an actual button? Those animations are the ones I'm talking about. The one's you unconsciously register as being nice and cool and non-intrusive - as in you don't really miss when they arent there, but when they are and in the very moment that they happen you think "oh thats kind of nice".
And writing those animations in pure css and javascript sucks. Makes me learn alot though, having to do it all myself. But it sucks. Maybe I should use a library like GSAP or whatever.
I digress.
As I was saying, web animations can make a website feel just a bit better than a website without animations. The important word in that sentence is CAN. Because this is just my opinion. Some people hate animations, for whatever reason, either the animations make them feel dizzy, or the animations trigger some photosensitivity, or they just think animations are annoying.
First rule of accessibility and animations is to stick your animations in a media query for people who dont have prefered reduced motion set to true, so that anyone who doesn't want to see elements flying everywhere don't have to.
Secondly, and this isn't a rule really, but there are 2 ways to achieve animations: the transitions property and the animation property.
For the absolute beginner, the simple way a web animation can be achieved is through the transition from a before property to an after property. To clarify, you need the before property, an after property, and a transition property.
For example, setting an element from an opacity of zero ( opacity: 0; ) to an opacity of one ( opacity: 1; ), and setting the transition time of 0.4s at a rate of linear (transition: opacity 0.4s linear; ) will make something appear gradually as if out of thin air.
Step up a level and give the before property of transform: translateY(-10%), and then make the after property a transform: translateY(0), with a transition time of 0.4s at a linear rate again, and it will make the element appear gradually AND appear from the bottom of the screen. Change the translateY to a translateX and it will make the element appear from the side.
You can achieve this with the other method also, the animation property. They are in essence the same, but the animation property allows for more complex and finetuning of animations. It utilises different syntax in the form of keyframes to specify specific transitions of properties at specific intervals using a timeline from start to finish. This will be discussed in depth in a future blog post.
Once you understand the principles behind it and how the css works, you can start experimenting with different combinations of css properties to create some fancy animations. A common one we see is the on hover animation of an element, say a button or a UI card. Another is a transition triggered or linked to te scrolling of the page.
And that's all for this one folks.
PROTIP: Some css properties are not animatable - as in they cannot be animated, or at least when animated, do not behave in the way you would expect. The list is long and many of them you wouldn't ever use in an animation anyway, but here they are.
