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 “Reversing an Easing Curve”
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 “Material Design Animation Guides”
- 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 3D and 2D scenes.
But, you should keep in mind that those libraries were not originally designed … Read article “Animate Images and Videos with curtains.js”
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 “Page Transitions for Everyone”
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.
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 “What Houdini Means for Animating Transforms”