How to use Mouseover and Loop effects

This article explores the creative possibilities of Mouseover and Loop Effects when applied to text, images, and other widgets. These effects add interactivity and visual appeal to your content, offering a combination of subtle animations and dynamic transformations.

Accessing Effects in the Design Section

To use these effects, navigate to the Design Section after selecting the widget, Scroll down until you  see the "Effect" option. Under this section, two types of effects are available:

1. Mouseover Effects
2. Loop Effects

1. Mouseover Effects

• Resize

  This effect allows the widget to scale up or down when hovered over with the mouse. You can configure the scaling percentage within a range of 0% to 200%, where:

  • 0% will shrink the widget completely.
  • 100% keeps the widget at its original size.
  • 200% doubles the widget's size.

• Opacity

  This effect adjusts the transparency of the widget as the mouse hovers over it. You can set the opacity level within a range of 0% to 100%, where:

  • 0% makes the widget completely invisible.
  • 100% keeps the widget fully visible.

• Rotate

  The rotate effect spins the widget to a specific angle when the mouse hovers over it. You can configure the rotation in degrees to determine how far the widget will rotate, such as:

  • 45°: A slight tilt to one side.
  • 90°: A quarter turn.
  • 180°: A complete flip of the widget.

• Pulse

  Adds a zoom-in effect that pulsates the widget. You can configure the pulse intensity in the settings.

2. Loop Effects

The Loop Effect is not triggered like the Mouseover Effect but will constantly loop while the scene is active. In addition to the Effect Library section and the Effect Configuration section, the Loop Effect has a Duration Configuration section.

This Time configuration section allows the user to configure the Duration of the effect and also add a Pause if wanted after the Duration of the looped effect - both defined in mili seconds. Specifically:

• Resize: This effect will continuously resize the widget in a loop. The widget will alternate between its original size and a specified scale, creating a smooth, repetitive resizing animation. You can configure the resize percentage to determine how much larger or smaller the widget becomes during each loop.

• Opacity: The opacity effect will adjust the transparency of the widget in a loop. The widget will gradually fade in and out between its default opacity and the level you set, creating a subtle fading animation that repeats seamlessly.

•  

  Rotate: This effect will rotate the widget in a loop. You can configure the rotation angle, and the widget will rotate to the specified degree and then return to its original position before repeating the motion. 

•  

  Pulse: The pulse effect creates a dynamic zoom-in and zoom-out animation for the widget in a loop. The widget will appear to "breathe" or "pulsate" by expanding and contracting based on the intensity level you set. This effect adds a rhythmic, attention-grabbing motion to the widget.

That’s everything you need to know about the "Effect" you can apply to widgets on the experience canvas. If you have any follow-up questions, feel free to reach out to us at support@getfastr.com.