Transitions in Alexa with AnimateItem

Transitions are simple animations that provides visual feedback and enhances the pleasantness of the UI. By simply combining opacity, movement, scale and rotation we can create various types of transitions.

If you are new to transitions you can get some inspiration from uimovement.com. Since the animations featured in the website is for web or mobile, not all can translate to a alexa animation but you can get some idea out of it.

Note: Always make sure the transitions are short and subtle.

This article will go through in detail on how to create some transitions with AnimateItem. If you are familiar with CSS Animations then AnimateItem works exactly the same with some limitations.

FadeIn

To create a fade in effect all we have to do is increase the opacity of the component from 0 to 1 gradually for a specific duration.

{
    "type": "AnimateItem",
    "duration": 1000,
    "value": [
        {
            "property": "opacity",
            "from": 0,
            "to": 1
        }
    ]
}

FadeOut

FadeOut is similar to fade in but in reverse. Here we gradually reduce the opacity from 1 to 0.

{
    "type": "AnimateItem",
    "duration": 1000,
    "value": [
        {
            "property": "opacity",
            "from": 1,
            "to": 0
        }
    ]
}

FadeInUp

Here the opacity needs to change from 0 to 1 and the component needs to move from bottom to top. So we manipulate both opacity and translate in Y axis

{
    "type": "AnimateItem",
    "duration": 1000,
    "value": [
        {
            "property": "opacity",
            "from": 0,
            "to": 1
        },
        {
            "property": "transform",
            "from": [
                {
                    "translateY": "100%"
                }
            ],
            "to": [
                {
                    "translateY": "0"
                }
            ]
        }
    ]
}

ZoomInDown

For this transition we manipulate opacity, scale on X & Y axis, translate on Y axis. This involves multiple AnimateItem executed in sequence. You will see an additional easing function here, rather than explaining what it does I will show a side by side comparison of the effect with and without the easing.

{
    "type": "Sequential",
    "commands": [
        {
            "type": "AnimateItem",
            "duration": 600,
            "easing": "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
            "value": [
                {
                    "property": "opacity",
                    "from": 0,
                    "to": 1
                },
                {
                    "property": "transform",
                    "from": [
                        {
                            "scaleX": 0.1,
                            "scaleY": 0.1
                        },
                        {
                            "translateY": "-100vh"
                        }
                    ],
                    "to": [
                        {
                            "scaleX": 0.475,
                            "scaleY": 0.475
                        },
                        {
                            "translateY": "60px"
                        }
                    ]
                }
            ]
        },
        {
            "type": "AnimateItem",
            "duration": 400,
            "easing": "cubic-bezier(0.175, 0.885, 0.32, 1)",
            "value": [
                {
                    "property": "transform",
                    "from": [
                        {
                            "scaleX": 0.475,
                            "scaleY": 0.475
                        },
                        {
                            "translateY": "60px"
                        }
                    ],
                    "to": [
                        {
                            "scaleX": 1,
                            "scaleY": 1
                        },
                        {
                            "translateY": "0"
                        }
                    ]
                }
            ]
        }
    ]
}

Adding a easing function enhances the transitions. AnimateItem supports both linear and cubic-beizier functions. Check easings.net to know the types of easing that can be generated with cubic-bezier and how it actually affects the transition.

Conclusion

Similar to the above examples you can create different variation of transitions. I have created a repo of few transitions which you can use in your skills https://github.com/arjun-g/apl-transitions. Instructions on how to use it can be found in the repo. Fade On!!!!!