Animation

Figma

🧪 Beta

Guidelines

🔭 Alpha

Web

🔭 Alpha

Mobile

🔭 Alpha

Animation refers to the technique of making static elements move or change over time, enhancing the user experience by making interfaces dynamic and interactive.

It can guide users’ attention, provide feedback on actions, illustrate complex processes simply, and make transitions smoother and more engaging. When used thoughtfully, animation can significantly improve the usability and aesthetic appeal of digital products, creating a more intuitive and memorable interaction for users.

Use animation thoughtfully

When designing with animation, it’s crucial to balance the use of animation to avoid overwhelming users or detracting from the primary content and functionality.

Keep critical information static

Do not use animations to convey critical information that users might miss if they do not see the animation.

Use static indicators (e.g., icons or text) for essential information and statuses.

Guidelines

Do / Don’t

Correct

Use appropriate animation speed to ensure animations are smooth and visually appealing. The bigger the change, the slower the animation should be.

Incorrect

Avoid using too fast animations as they can be distracting and disorienting for users and less smooth.

Correct

Use smooth animations and transitions to guide users’ attention and provide an elegant visual feedback on interactions.

Incorrect

Avoid sharp, abrupt animations that can be jarring and disrupt the user experience.

Correct

Prefer using ease-out animations to make elements feel more natural and reactive.

Incorrect

Avoid using ease-in animations that can make elements feel too slow and unresponsive.

Takeaways

• Stay with CSS animations and transitions as they are more efficient than JavaScript animations.

• Animations are great to provide feedback on user actions, such as button clicks or form submissions.

• Highlight changes or new content with subtle animations to draw the user’s attention.

• Use transitions to smoothly change between different states, making it clear to the user what is happening.

• Animations must be tested on different devices and screen sizes to ensure they work well across various contexts.

Usage

Implementation

<script lang="ts">
</script>

Properties

Animation

Type : CSS Animation

Floating

floating

Fade

fade-in

fade-out

Slide

slide-up

slide-down

Speed

--animation-speed-fast

--animation-speed-default

--animation-speed-slow