Enter Animation

Enter animations are often done by animating opacity, blur and translateY. I often prefer to break the components into smaller parts and animate those individually with a stagger between each element.

In the first example, there is a single animation and it is applied to the container that holds the title, description and buttons.

In the second example, the title, description and container that holds the buttons are animated individually with a 100ms delay between each section.

In the third example, the title is split into inidividual spans and each span contains a word. Each span is animated individually with a 80ms delay between them.

The description remains a single block and the buttons are also animated individually rather than their entire container. In terms of the blur and translateY values, I'm using a 5px blur and 8px translateY.

More

In case you have any questions reach me at jakub@kbo.sk, see more of my work on Twitter or subscribe to my newsletter.