Widget Responsive Motion Components

Published: April 24, 2023

Key takeaways

Use these responsive motion components when you want to use motion in your widget. With these components incorporating best practices, they are the recommended and easiest way to add motion.

 

Need quick advice?

See the Widget Responsive Motion Component Tech Docs.

 

In this article:

line-break

What are motion components?

The motion components are responsive components for widgets that incorporate motion. These components are the recommended way to include motion in your widget, incorporating best practices as seen in the Widget Interactions section of Widget Guidelines. Excessive motion might be distracting and lead to a poor user experience.

These are the available components you can utilize when building your widget.

pager
line-break

Widget Collection Pager

This page outlines the collections pattern that allows a single widget to page through multiple pieces of content.

Get the Motion Collection Pager Component.

pager
line-break

Motion Scale Component for PersonID

In some instances, PersonID can trigger a widget to update content catered to customers. If this behavior applies to you, use the Motion Scale Component.

This transition will update the widget to reveal personalized information to customers.

Get the Motion Scale Component for PersonID Component.

scale
line-break

Widget Button Press State

The Alexa press state responsive component (AlexaPressState) creates a tappable area over the entire widget. The component displays a subtle animation when tapped to provide the user with feedback. You configure AlexaPressState to either fill the entire widget viewport, or leave enough space for your header and/or footer.

Other than the feedback on tap, AlexaPressState doesn't display any visual components on its own. Use AlexaPressState in addition to your own design or a template to display content.

Get the Widget Button Press State Component.

scale
Previous Article: