We just published a free plugin called CountUp Animation. This allows you to animate a counting operation (up or down) in a text* element via a workflow action. In other words, it will increment or decrement a number at a specified pace. You can specify a start value, end value, duration, and a couple other parameters related to the animation/visual.
*This does work with some other element types, like inputs, but the behavior in those cases is not officially supported by this plugin.
Please email any bugs, questions, or suggestions to david@airdev.co or reply to this thread. Happy Bubbling!
Hi @david2 and the AirDev team! Loving this plugin.
Do you know how I need to structure the Element ID when I’m using this CountUp animation inside of a group? Currently, I can only get it to work when it’s not in a group.
@callen.hedglen I took a quick look at the plugin code and I don’t think there is anything you can do at your end.
Looks like the plugin code runs when the document is not ready yet (e.g. bubble groups not loaded yet).
@david2 make sure your plugin code is run only after the document is ready by wrapping the code inside a $(document).ready( yourfunction ) or simply $(yourfunction)
@callen.hedglen Glad to hear you’re liking it! Sorry about the issue - are you currently running the animation on page load, or through another action? I just pushed an update to the plugin’s code. Do you mind upgrading to the newest version and testing this again?
I upgraded to the newest version, but was still seeing the same issue. After some testing, I finally was able to figure out that the element breaks if it is in a group that has conditions on when it’s visible.
Everything in this group (the one the CountUp animation is in) is the home screen of my mobile app, so the group is only visible when the [current_page]'s [custom_state] is “home”.
Appreciate all the help in getting this bug resolved.
Hi @callen.hedglen - sorry for the delayed response! And no problem for the help - happy to do it.
So one rule with using the plugin (and I believe this is true of any plugin that targets elements using the element ID) is that the element you are trying to manipulate / target with the animate action must be visible at the time the action is run.
In your case - rather than running the animate action on page load - can you try running the animation on “Do when condition is true” and when current_page’s custom_state is “home”? The idea being that you ensure your target element is visible before attempting to run an action on it - so you trigger the action using the same condition that makes your element visible (custom state is “home”).
If this suggestion doesn’t work, maybe try adding a quick “Pause before next action” step before running animate.
They aren’t any current known issues and I haven’t made any recent updates. I just poked around in your editor and I honestly can’t figure out any reason why it wouldn’t be working. Can you maybe try deleting the Animate actions and re-adding them? …or creating a new text element and seeing if you can target that one using an Animate action in that same workflow?
Hey guys,
Anyway to apply this plugin in RG?
Say i have some amount of cells in a rg with a text box holding a different number, how can i animate count up that number in the rg cell ?
Thanks
Would be addiitonally awesome if you could identify more than one element using the plugin, instead of adding the action multiple times - nevertheless, it still works great!