Making Web Animations
Tags: animations, css, frontend
Published: 2018-10-17 19:45:42

---
title: Making Web Animations
published: true
description: A bit of personal research done to learn about web animations.
tags: animations,css,front-end
cover_image: https://thepracticaldev.s3.amazonaws.com/i/nt1nd5z5xet075ox4ovl.png
---

# There's most likely an App for that.

Nope. There are a ton of prototyping tools and most of them tie closely with design tools.  I'm a developer and the design is 99% already implemented for my current project.

## What about animation libraries?

Absolutely.  There are several libraries that I came across but they baked in animations that I would never use in a serious way.  It also seemed hard to merge 2 animations into a fluid motion.  Since we're trying to make a meaningful experience for the user, we'll need to make our own custom animations.

## Let's assume you know the basics.

Writing CSS animations are conceptually easy but combining them in a way that looks fluid and expected is very hard.  Let's look at something advanced.  When I was researching this topic, I saw someone analyzing the stripe.com navigation dropdown.  A dropdown couldn't be that advanced, right?  I started doing my own analysis and man there is a bunch of knowledge packed in a "simple" dropdown.  I had never heard of the `will-change` or `transition-property` css property.  The other thing that stumped me was the dropdown seemingly "rolled down".  

![dropdown](https://thepracticaldev.s3.amazonaws.com/i/i6lps4kn2qosz26lxdcx.gif)
<figcaption>It's subtle, but it's there</figcaption>

How does that work?  It took me a while but I realized I could change the animation time to really see it.

![dropdown2](https://thepracticaldev.s3.amazonaws.com/i/xpm6hym6agzpew9rpxg5.gif)
<figcaption>There! You can see the bottom grows!</figcaption>

Ok so how did they do that?  I continued to dig down.

![dropdown3](https://thepracticaldev.s3.amazonaws.com/i/ivjhhvy6rl9hlwihi8ny.png)
<figcaption>Ah ha! The element starts off skewed.</figcaption>

If I can find the css attribute causing the skew, I can link that to the animation.  I toggled css properties until I found `transform: rotateX(-15deg);` was removing the skew.  Neat.  But I don't understand.  *Googles rotateX.  I find myself in codepen...

{% codepen https://codepen.io/kyleparisi/pen/GYyLYE %}

Well, what the heck?  I dig some more in the CSS...

{% codepen https://codepen.io/kyleparisi/pen/vVpMQg %}

Bingo.  `perspective: 2000px;` did the trick.  Yet another CSS property I've never used.  So how does the element lose that perspective and result in a normal rectangle?  `transform: none;`.

*breathing heavy*

- `will-change` is a rendering optimization for the browser.  The browser can run some calculations on changes to make it more fluid.
- `transition-property` are the properties that should change over the `transition-duration`
- `perspective` "determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective"

## Wow

All that for a dropdown.  But that's the kind of detail I was looking to find when it comes to animations.  I originally came into this with the mindset that the element should be animated from final position -> transformed to animation starting point -> back to final position.  This illuminated the idea of starting off in a transformed position and then _removing transformations as the animation_.

There is still more to learn!  Good luck!