Let's combine three things we just learned here on CSS-Tricks:
With all these three things in our toolbox, we can Ajax for some arbitrary content and insert it onto the page with a revealing height animation. Tricky tricky!
You might have heard of RxJS, or ReactiveX, or reactive programming, or even just functional programming before. These are terms that are becoming more and more prominent when talking about the latest-and-greatest front-end technologies. And if you're anything like me, you were completely bewildered when you first tried learning about it.
Sites all too often inundate their audiences with automatically playing, battery-draining, resource-hogging animations. The need for people being able to take back control of animations might be more prevalent than you may initially think.
Web Animation Workshops has started up again for Spring, we're headed for San Francisco, Chicago, and Paris this year, some dates still to be announced. Val Head and I team up to bring you two packed days full of content and exercises so that when you leave the class, you not only understand the techniques of how to animate in different tech stacks/environments but why. Here's is some of the content we cover:
Our own Sarah Drasner:
Unlike fonts, colors, and so on, we tend to add animation in as a last step, which leads to disorganized implementations that lack overall cohesion. If you asked a designer or developer if they would create a mockup or build a UI without knowing the fonts they were working with, they would dislike the idea. Not knowing the building blocks they’re working with means that the design can fall apart or the development can break with something so fundamental left out at the start. Good animation works the same way.
I was stopped at an intersection the other day. It was raining. The road on the other side sloped upwards, so I could see the stopped cars on the other side of the road kind of stadium-seating style. I could see all their windshield wipers going all at the same time, all out-of-sync with each other. Plus a few of them had seemingly kinda broken ones that flapped at awkward times and angles.
What does that have to do with web design and development? Nothing really, other than that I took the scene as inspiration to create something, and it ended up being an interesting hodgepodge of "tricks".
Scaling our websites and applications so that they look great on every screen can be difficult. A big portion of that difficulty can be trying to get specific components, particularly ones that have pieces that have to stay a certain size (like animations), to look good regardless of the screen size. In this post, we'll cover how to help keep our responsive animations sized the way we want them.