250326 - Updated skeleton loader motion specs #43
Assignees
Labels
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Description
As part of our effort to scale motion and delight across the Design System, we are asking to update motion specs for the Skeleton loader component. The Figma specs table link provided below details the behaviors, as well as tokens that are used.
Current Experience:
The gradient shimmer animates across the item tile.
Updated Experience:
Remove gradient/movement, replace with a simple fade up / down over the course of 2 seconds between two hex values.
Color updates:
[Light mode colors]
On primary background
First color: color.core.neutral.200
Second color: color.core.neutral.300
On secondary background
First color: color.core.neutral.300
Second color: color.core.neutral.400
[Dark mode colors]
On primary background
First color: color.core.neutral.800
Second color: color.core.neutral.700
On secondary background
First color: color.core.neutral.700
Second color: color.core.neutral.600
Preview of table in Figma
Additional notes:
If possible, when skeleton is finished, fade out before bringing in content.
If possible, add an opacity fade on new content.
Screenshots
Web motion reference - example 1
Web motion reference - example 2
Figma link
https://www.figma.com/design/zRfjlY12EVZSuSHo0sFEvn/Motion-Documentation?node-id=1101-9224&t=v20K9gSBE4lGB6F0-4
Engineering pre-requisites
The text was updated successfully, but these errors were encountered: