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 elements. 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 element, 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 element 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 element completely.
  • 100% keeps the element at its original size.
  • 200% doubles the element's size.

• Opacity

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

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

• Rotate

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

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

• Pulse

  Adds a zoom-in effect that pulsates the element. 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 milliseconds. Specifically:

• Resize: This effect will continuously resize the element in a loop. The element 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 element becomes during each loop.

• Opacity: The opacity effect will adjust the transparency of the element in a loop. The element 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 element in a loop. You can configure the rotation angle, and the element 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 element in a loop. The element 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 element.

That’s everything you need to know about the "Effect" you can apply to elements in the Frontend Visual Designer. If you have any follow-up questions, feel free to reach out to us at support@getfastr.com.