[Free] EffectContainer Animated Layout

Extensions
, , , ,
1

The EffectContainer extension adds smooth, modern animations to components in MIT App Inventor. It can animate components inside VerticalArrangements or HorizontalArrangements with various effects including bouncing, sliding, fading, and more. The extension provides both simple and advanced controls for creating professional-looking animations.

Properties

AnimationEffect

image
image205×503 12.2 KB

  • Type: Dropdown (Designer property)
  • Description: Sets the default animation effect for all animations
  • Options:
    • Fade
    • Slide Up
    • Slide Down
    • Slide Left
    • Slide Right
    • Scale
    • Bounce
    • Zoom In
    • Flip
    • Rotate

BounceEnabled

BounceEnabled_Set_Property

  • Type: Boolean (Designer property)
  • Description: Enables or disables the bouncing effect for animations
  • Default: True
  • Usage: Set to False for smooth non-bouncing animations

Blocks (Methods)

AnimateArrangement

AnimateArrangement_Call_Method

Animates all components in an arrangement using the default effect set in the designer.

Parameters:

  • arrangement: The arrangement to animate (VerticalArrangement or HorizontalArrangement)
  • duration: Animation duration in milliseconds
  • triggerOnVisible: If true, animation triggers when arrangement becomes visible

AnimateArrangementWithEffect

AnimateArrangementWithEffect_Call_Method

Animates all components in an arrangement with a specific effect.

Parameters:

  • arrangement: The arrangement to animate
  • effectName: Name of the animation effect (must match exactly)
  • duration: Animation duration in milliseconds
  • triggerOnVisible: If true, animation triggers when arrangement becomes visible

AvailableEffects

AvailableEffects_Get_Method

Returns a list of all available animation effects.

Returns: List of effect names:
["Fade", "Slide Up", "Slide Down", "Slide Left", "Slide Right", "Scale", "Bounce", "Zoom In", "Flip", "Rotate"]

SetBounceTiming

SetBounceTiming_Call_Method

Customizes the bounce behavior for animations (only works when BounceEnabled is true).

Parameters:

  • overshootPercent: How far to overshoot the target (0.1 = 10%)
  • bounce1Percent: Size of the first bounce (0.3 = 30%)
  • bounce2Percent: Size of the second bounce (0.2 = 20%)
  • bounce3Percent: Size of the third bounce (0.1 = 10%)
  • bounce4Percent: Size of the fourth bounce (0.08 = 8%)
  • bounce5Percent: Size of the fifth bounce (0.05 = 5%)
  • bounce6Percent: Size of the sixth bounce (0.03 = 3%)
  • settlePercent: Size of the final settle (0.02 = 2%

ResetBounceTiming

ResetBounceTiming_Call_Method

Resets all bounce timing parameters to their default values.

Events

AnimationComplete

AnimationComplete_Event

Fires when an animation completes.

Sample Output Video:

Sample Block Code:

blocks (31)
blocks (31)1888×1480 392 KB

If you find this extension useful and wish to support further development, you can support us via: PayPal.Me

License: Developed by Kenneth Morales using Fast builder.
You can download the aix extension provided bellow.
Download Link:
Version: 1
com.kenmor.effectcontainer.aix (13.8 KB)

1 Like