Graphic Animations

Overview

Our new Graphics shape brings the power of WebGL to Fastr Frontend. WebGL is a web API that allows a website to run special programs called "shaders" that run directly on a computer's GPU (Graphics Processing Unit). These special shader programs can be used to render powerful real-time graphics, allowing for unique interactive experiences that would otherwise be impossible in a web browser. 

We are launching Graphics with a template that you use to import directly into your account! To get started, just import the "Graphic Animations" template into your account by following the steps in this article: Libraries & Templates

Additionally, our team is actively designing more Graphics integrations and can work with your team to create custom Graphics for your specific account. To submit a request, please reach out to your account manager. 

How To Use

After importing the "Graphic Animations" template into your account, you will see a new Widget type available in your experiences. This can be seen here:

You can add this widget to your canvas, and then select a Graphic type from the Drop-down menu. Each Graphic has different parameters to customize the visual effects. Please note, in some cases it is necessary to refresh your browser after adding the Graphic to your canvas

Graphic Types

For most fields, the parameters use a value from (0 -> 1) to adjust the intensity of the effect. For cases where a different range of values is used, it has been noted below: 

Image Zoom

The Image Zoom effect allows you to take a source image and Zoom in over certain sections as you hover your mouse. You can choose to have the image placed to the side, as shown in the GIF above. Alternatively, you can also have the Image Zoom directly on top of the original image. The following fields can be customized:

• Zoom Factor
• Show Outline? 
• Outline Color
• Selector - This field is required in order to connect an Image with the Image Zoom Graphic. In the Selector field, you will need to type a unique ID, such as "exampleImageZoom". 
  
  Afterwards, you will want to click on your image and add the same unique ID under the "Custom CSS Classes" field, as shown here: 
  
  

Snowfall

The Snowfall effect takes an image source to create a drifting effect, similar to snow falling. The following fields can be customized: 

• Near Color
• Far Color
• Transparency
• Particle Count
• Snowflake Size
• Fall Speed
• Horizontal Speed
• Sway
• Sway Speed
• Droop
• Depth - This takes a value from (1 -> 10)
• Minimum Speed
• Maximum Speed
• Image URL
• Ignore Image Color
• Rotate Image

Sparkles

The Sparkle Graphic adds an interactive sparkle trail that follows the users mouse. The following fields can be customized: 

• Color
• Sparkle
• Particle Size 
• Particle Density
• Particle Spread
• Particle Lifetime
• Click Burst Density
• Click Burst Spread
• Mouse Momentum
• Gravity
• After Image

Fluid Sphere

The Fluid Sphere Graphic can be used to create a 3D orb with distortion. The following fields can be customized: 

• Distortion
• Base Color 
• Secondary Color

Wavy Button

The Wavy Button Graphic adds an interactive button that will change shapes as the users mouse interacts with the area.. The following fields can be customized: 

• Rounding
• Border Width - This takes a value from (0 -> .5) to set the border width
• Border Color
• Active Color - This sets the button color when a user hovers their mouse
• Inactive Color - This sets the button color without a user interacting

Particles

The Particles Graphic adds circular Particles that can move across the board. The following fields can be customized: 

• Primary Color
• Seconday Color
  
• Transparency
• Particle Count 
• Minimum Radius
• Maximum Radius
• Minimum Speed
• Maximum Speed
• Angle - This takes a value from (0 -> 360) to adjust the angle of the Particle flow 

Masked Text

The Masked Text Graphic adds the ability to create moving effects inside of your text widget.
The following fields can be customized: 

• Frequency
• Speed
• Dark Color
• Light Color
• Text
• Font Family
• Font Size
• Bold

Please note, there is additional set-up required to make use of the "Font Family" field. At the moment, a text widget using the font is required on the canvas, in order for the graphic widget to correctly detect and use the font. For example, you can see this screenshot has an invisible text widget set to use the "Ma Mania" font:

With this invisible text widget on the canvas, the graphic widget will update accordingly:


If you run into any questions or concerns, please reach out to support@getfastr.com