Animations #36
Animations #36
Conversation
|
|
|
Hey @leighajarett and @PoojaB26 This PR is ready to review now :) |
| Widget animations allow you to add animation effects at the widget level. | ||
| To add an animation to a widget, you'll need to go to the property panel for the widget and select the animations tab. | ||
|
|
||
| <img src={animationsOverview} alt="Animation tab within the property panel is used to add widget animations. Animation trigger specifies when the animation will be run. Widget animations can be triggered when the page (or widget in the case of a delayed load) loaded, or within an action. Animation effect specifies the type of animation to use.Animation curve specifies the function used to interpolate values over time. It controls the speed and style of the animation. Animation properties specifies the properties that can be configured for all widget animations, like whether or not it should loop. Effect-specific properties are properties to specific to the animation effect selected. For example, Fade animations allow you to control the initial opacity and the final opacity. You can customize these values to get the look and feel you desire." /> |
There was a problem hiding this comment.
In the image: "Effect-specific properties are properties to specific to the animation effect selected" should be grammatically be "Effect-specific properties are properties that are specific to the animation effect selected"
| | **Flip** | Flip animation rotates an element around its horizontal or vertical axis, creating a mirror effect. It's often used for flipping cards in a UI to reveal hidden information. | <img src={flipGif} class="xsmall-image" alt="Alt text for your GIF" /> | `Flip`: The angle at which the widget is viewed. | | ||
| | **Shimmer** | Creates a "shiny" effect moving across the screen, often used to signify that data or content is in the process of loading or being fetched. | <img src={shimmerGif} class="xsmall-image" alt="Alt text for your GIF" /> | `Color`: The color of the "shiny" line or gradient that sweeps of the widget. A common practice is to use a slightly lighter shade than the content. <br></br> <br></br> `Angle`: Determines the direction of the shimmer effect across the content. 0 degrees for horizontal and 90 for vertical. | | ||
| | **Tint** | Adds a color overlay effect to your content. |<img src={tintGif} class="xsmall-image" alt="Alt text for your GIF" /> | `Color`: Color of the overlay. <br></br> <br></br> `Strength`: Intensity of the tint. | | ||
|
|
There was a problem hiding this comment.
After this section, we can add a disclaimer for which of these animations dont run on Test mode, I remember shimmer doesnt.
There was a problem hiding this comment.
ok, I have checked all animations and only the shimmer one is not working in Test mode. So, I have added a note in its own section.
| | **Linear** | Progresses at a constant speed throughout the animation. It provides a uniform transition from start to end, with no acceleration or deceleration.| | ||
|
|
||
|
|
||
| ## How to trigger an animation on page load |
There was a problem hiding this comment.
title may be too big: maybe we just say "Animation on Page Load"
|
|
||
| <!-- add aracde --> | ||
|
|
||
| ## Triggering an animation as part of an action flow |
There was a problem hiding this comment.
sam: title too big: could be "Animation on Action Trigger"
|
|
||
| ### Create staggered animation | ||
| A staggered animation is multiple animations executed subsequently. Adding staggered animations can help you create a stunning visual effect. | ||
|
|
There was a problem hiding this comment.
If not now, but maybe in the future we can add a nice diagram to show how multiple animations are divided on a timeline when its staggered.
|
Hey @PoojaB26 I have addressed all the review comments and I am going to merge this. |
Description
Animations
Linear ticket and magic word Fixes DEVR-341
Type of change