Quick practical tips for improving your UI/Web transitions.

4 simple After Effects tips for making smooth transitions.

---

1. Get the AEUX plugin.

Super nice tool to easily export your groups and layers to After Effects. UX motion design with the tools you use(Figma/Sketch/XD).

Download here: https://aeux.io/guide/download.html

2. Use masks.

Masks are a great way to create elegant transitions. This is a super easy trick you can do.

Here is an example with no mask:

Here is an example with mask:

Here’s how you can do this:

• Create a shape layer
• Put it above your the image/layer you want to mask.
• For the layer/images you want to mask Press on “Toggle Switch / Modes” and select “Alpha Matte Shape Layer 1”.

3. Do not use the default “Ease in / Ease out” properties.

Try to play a bit with the proprietes by using the “Graph Editor”.

Here is an example with the default animation proprietes:

Here is an example with the custom animation proprietes:

The only thing you have to do is to play a bit with the values in the Graph Editor so that you have smoother animations.

To create that smooth effect you have to change it like this:

4. Add a short delay between the elements

Adding a bit of delay between the elements you need to transitions helps a lot creating a more smoother feel and reduce cognitive load.

Here is an example with a no delay between elements:

Here is an example with delay between elements:

Here’s how you can do this:

Pro tip* — Always try to keep your transitions under 3 seconds.