IntersectionObserver. We just blogged about all this.
Let’s take a look at a carousel I worked on where items slide in and out of view with CSS animations. To get each item to slide in and out of view nicely I used a cubic-bezier for the
animation-timing-function property, instead of using a standard easing keyword.… Read article
I've seen two guides posted to Medium about animation in the last month that have seriously blown up!
- Taras Skytskyi's The ultimate guide to proper use of animation in UX
- Jonas Naimark's Motion design doesn’t have to be hard
There is a lot to learn in each one! The demonstration animations they use are wonderfully well done and each guide demonstrates an interesting and effective animation technique, often paired next to a less successful technique to drive the point home. … Read article
- Browser creates the DOM and CSSOM.
- Browser creates the render tree, where the DOM and styles from the CSSOM are taken into account (
display: noneelements are avoided).
- Browser computes the geometry of the layout and its elements based on the render tree.
While browsing the latest award-winning websites, you may notice a lot of fancy image distortion animations or neat 3D effects. Most of them are created with WebGL, an API allowing GPU-accelerated image processing effects and animations. They also tend to use libraries built on top of WebGL such as three.js or pixi.js. Both are very powerful tools to create respectively 2D and 3D scenes.
But, you should keep in mind that those libraries were not originally designed to … Read article
As Sarah mentioned in her previous post about page transition using Vue.js, there is plenty of motivation for designers and developers to be building page transitions. Let's consider mobile applications. While mobile applications are evolving, more and more attention is given to the animation experience, while the web pretty much stays the same. Why is that? … Read article
I used to think implementing swipe gestures had to be very difficult, but I have recently found myself in a situation where I had to do it and discovered the reality is nowhere near as gloomy as I had imagined.
This article is going to take you, step by step, through the implementation with the least amount of code I could come up with. So, let's jump right into it!… Read article
I've been playing with CSS transforms for over five years and one thing that has always bugged me was that I couldn't animate the components of a
transform chain individually. This article is going to explain the problem, the old workaround, the new magic Houdini solution and, finally, will offer you a feast of eye candy through better looking examples than those used to illustrate concepts.… Read article