Rambling on about animation on the web: a starter guide, of sorts.

source: dribbble

Back when I was debating on joining a coding bootcamp I kept wondering if any of my skills from being a motion designer for the past decade would ever come in handy. I was already pretty fluent with using Expressions in After Effects, which is a scripting language based on JavaScript inside of AE, and wanted to really see where this knowledge could go. Upon hours of googling around, I collected a handful of links that I think are useful and, more importantly, easy to digest.

Before we get into the fun stuff let me talk about some basic terms that should help you when you want to google your way into making css/js do what you want. Animation is a deep topic and is equally time consuming as programming and like most things, it takes a lot of time to master.

• Timeline — this is length of time your animation is active for
• Keyframe — a keyframe records the values of selected attributes at that specific moment in time. ie: at 0 seconds your position is (0,100) and at 5 seconds it has moved to (100,100). Or, your scale is set to 0 at 0 seconds, then 50 at .5 seconds, and finally 100 at 2 seconds. Timeline is a visual thing but in code you’ll have to learn to read it.
• Position X,Y,Z coordinates — a simple way to think about it is X is left and right, Y is up and down, Z is forwards and backwards (depth), typically shown as (x,y,z).
• Opacity — opacity is the amount of transparent-ness. 0 is completely transparent, 100 is fully visible.
• Graph editing (cubic-bezier in CSS)— this is a topic worthy of its own post but it boils down to how the animation is handled. Some terms you’ll probably see are Ease, Linear, Easy Ease, etc. I think it’s easier to just see it in action

these movements can be applied to various keyframes, like scaling in and out for a bouncy animation or sliding in from out of frame, the possibilities are really up to you.

One last thing I want to mention before getting to the cool stuff. Animation should be subtle and if the user stops to think about it or it feels like it’s disruptive to the task at hand, you’ve probably gone too far. Over the years I have seen lengthy and/or slow animations that really are unnecessary and would be vastly improved if it was sped up or trimmed down. You code with a purpose and you design with a purpose.

I’m going to start with my favorite resources and it’s probably best to just scope them out.

Animate.css

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Animate.css

GSAP

GreenSock

GSAP seems to be pretty simple to use and pretty powerful if you utilize it properly.

Lottie

I talked about Lottie a little bit previously, but here are some cool examples showing how you could use it with scrolling behavior and using a couple other resources.

Frame by frame animation with JavaScript and CSS

Guilio goes over a few different way to code your way thru animation and even discusses pros / cons of each method. Really useful if you’re unsure how it all works.

Frame by Frame Animation Tutorial with CSS and JavaScript - SitePoint

CSS-Tricks

This is just a search url for css animation, worth perusing if you’re looking for something.

Search Results | CSS-Tricks

I love motion design and I’d love to see if anyone else has come across useful links or wants to show off their projects.

Here are a couple of good reads from people in my cohort talking about the same topic.

Understanding Basic Javascript Animations

Making 3D animated topographical maps with Processing and Perlin Noise