CountUp Animation

Demo Link: https://chakor-demo-4.bubbleapps.io/version-test/countup_animation

Editor Link: https://bubble.io/page?id=chakor-demo-4&test_plugin=1733932012265x157442007389962240_current&tab=Design&name=countup_animation&type=page

Instructions to Use the "CountUp Animation" Plugin

1. Install the Plugin in Your Bubble App
   • Open your Bubble app editor.
     
   • Navigate to the Plugins tab.
     
   • Click on Add Plugins and search for "CountUp Animation."
     
   • Install the plugin into your app.
     
   
   
2. Add the CountUp Element
   • In your Bubble editor, navigate to the Design tab.
     
   • Drag and drop the CountUp Animation element onto your page.
     
   • Configure the element's properties:
     • Target Element ID: Enter the ID of the target element.
       
     • Initial Value: Set the starting number.
       
     • Final Value: Define the number to count up to.
       
     • Decimal Places: Specify the number of decimal places.
       
     • Duration: Set the animation duration in seconds.
       
     • Separator: Choose a separator for large numbers (e.g., comma or period).
       
     • Decimal Symbol: Define the decimal symbol (e.g., period or comma).
       
     • Prefix: Add a prefix (e.g., $, €).
       
     • Suffix: Add a suffix (e.g., %, km).
       
     
     
   
   
3. Use the Plugin Actions
   • Navigate to the Workflows tab.
     
   • Add a workflow action triggered by an event (e.g., button click).
     
   • Choose one of the following actions:
     • Begin CountUp: Starts the animation.
       
     • Pause/Resume CountUp: Toggles between pausing and resuming.
       
     • Reset CountUp: Resets the animation to the initial value.