loading...
Cover image for Making Web Animations

Making Web Animations

kyleparisi profile image Kyle Parisi ・2 min read

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

It's subtle, but it's there

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

dropdown2

There! You can see the bottom grows!

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

dropdown3

Ah ha! The element starts off skewed.

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...

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

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!

Discussion

pic
Editor guide
Collapse
niorad profile image
Antonio Radovcic

Also if you ever run into the problem that appearing elements are nicely animated, but disappearing nodes just vanish, and you don't want to add JS, you can handle the toggle with a checkbox and apply the animations to 'input:checked + div'. This way I could do the lids on devlids.com. The JS-way would be to add the disappear-animation-class and defer removing the dom-node with a timeout.

Collapse
jdnichollsc profile image
Juan David Nicholls Cardona

Hi Kyle, what do you think about this animation? codepen.io/jdnichollsc/pen/mdervLB
It would be awesome if you can give me some feedback to improve the styles of this animatable component, check here: github.com/proyecto26/animatable-c...

Thanks in advance!

Collapse
kyleparisi profile image
Kyle Parisi Author

Hi! Seems good to me. Looked through the code and seems logical! Great work!

Collapse
jdnichollsc profile image
Juan David Nicholls Cardona

Any pull requests are really welcome, thanks for taking time to review it! 😊