Installation and Configuration

1. Install the Component

   • Download and install the Sparkler Animation component from the OutSystems Forge into your environment.

   • Publish the component module using Service Studio.

2. Add the Sparkler Animation to Your Screen

   • Open the screen where you want to add the animation.

   • Drag and drop the SparklerPlaceholder block from the Sparkler Animation component onto your screen.

3. Place Widgets Inside the Placeholder

   • Inside the SparklerPlaceholder, add any widget (e.g., Button, Image, Icon, or Card) that you want to trigger the sparkler animation on click.

4. Configure Sparkler Settings

   • The SparklerPlaceholder block exposes the following input parameters:

     • Sparkle Density: (Integer) Defines the number of sparkles generated per click.

     • Spread Area: (Integer) Defines how far the sparkles will spread from the click point.

     • Sparkle Color: (Text) Defines the color of the sparkles using a HEX code or color name.

General Instructions on How to Use

• Triggering the Animation:
  Users will see the sparkler animation when they click any widget placed inside the placeholder.

• Customizing the Experience:
  Adjust the Sparkle Density, Spread Area, and Sparkle Color input parameters to fit your UI design needs. You can bind these to static values or dynamic expressions if you want to change them at runtime.

• Best Practices:

  • Use moderate density and spread values to ensure optimal performance, especially on mobile devices.

  • Choose sparkle colors that contrast well with the background to maximize visual impact.

  • Group related clickable elements inside a single SparklerPlaceholder if they share the same animation settings.

Example Configuration