Fastr Workspace - Interactions: Animations

Overview

This article goes over adding different animations in your experiences. It will go over Slide In, Slide Out, Move, Rotate, Resize and Change Opacity. For general information about adding an interaction, please review the following article: Fastr Workspace - Interactions Overview

To add an interaction on any widget, you just need to select the widget and go to the Interact tab. From here you will click on the plus icon to get started. Please note that if your widget is not on a board, you will not see this plus icon.  

After clicking on the plus icon, the default interaction will appear for opening a link. In this panel, you can click on the action to change it or make edits. Each animation type can be triggered in various ways, such as on click, mouseover, or just immediately. You can also setup animations that will occur just a single time, or having ones that might loop. For information on making these adjustments, please review the following articles: 

Animation Triggers: Fastr Workspace - Interactions: Triggers

Adding Loops or Sequences: Fastr Workspace - Interactions: Advanced Options

Animations:

There are six different animations, but you can create unique effects by stacking them together. For example, you could have a button that repeatedly changes size, but also changes opacity when a user hovers their mouse.  The basic versions of each animation can be seen in the following example page: Example Animations 

• Slide In: The Slide In action automatically triggers a smooth sliding animation for a selected widget. This means the widget will not be visible when the page first loads, and it will slide into place. You can adjust the direction to change which side of the screen the widget appears from. You can also adjust how long this takes to slide, as well as the easing effect. 
  
• Slide Out: The Slide Out action works in the opposite direction as Slide In. A widget that will be visible on canvas initially will be visible when the page first loads, and it will slide out of view. You can adjust the direction to change which side of the screen the widget goes towards. You can also adjust how long this takes to slide, as well as the easing effect. 
  
• Move  - The move animation can be used to have a widget slide in a certain direction. This can be used to either move a widget horizontally, vertically, or in both directions. You can also stack multiple move animations to have it go in one direction, and then change and head in another. These values can be adjusted by changing the X and Y values, which will determine how many pixels the widget moves. As you adjust the X and Y values, you will see a preview on the canvas for where the widget will move.  You can use negative values here as well. You can also adjust how long this takes to move, as well as the easing effect. 
  
• Rotate - The rotate animation can be used to have a widget rotate by a certain amount of degrees. This can be used to either rotate a widget clockwise or counterclockwise. As you adjust the angle to select the amount of degrees, you will see a live preview on the canvas as an estimate for the rotation. You can use negative values here as well. You can also adjust how long this takes to rotate, as well as the easing effect. 
  
• Resize - The resize animation can be used to have a widget resize to a larger or smaller scale by a given percent. As you adjust the scale to select the percentage, you will see a live preview on the canvas as an estimate for the rotation. Any value above 100% will be larger, and any value below 100% will become smaller. You can also adjust how long this takes to resize, as well as the easing effect. 
  
• Change Opacity - The change opacity animation can be used to have a widget become more transparent or opaque. At  100% the widget will be fully opaque, and at 0% the widget will be fully transparent. You can also adjust how long this takes to change opacity, as well as the easing effect.
   

If you have any follow-up questions or need further assistance, please feel free to reach out to us at support@getfastr.com — we're happy to help!