Forum Academy Marketplace Showcase Pricing Features

[New Plugin] CountUp (or down) Animation

Showcase
#1

Hi all,

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 [email protected] or reply to this thread. Happy Bubbling!

David
AirDev - Custom Software for Everyone

9 Likes
How to animate numbers in text box
#2

Here’s an example on how to use this plugin: https://widgets.airdev.co/plugin-widget/countup-animation-1527109742042x551353350500909060

#3

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.

Thanks!

#4

Also tagging the other airdev members on this: @stephanie @vlad @alex4 @ahaller @andersan

#5

@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)

1 Like
#6

@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?

Thanks @seanhoots for the suggestion!

#7

Hi @david2, thanks for the quick response!

BTW, I am running the animation on page load.

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.

Thanks!

#8

Hey @david2, just tagging to bring this up again in the forum. Thanks!

#9

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.

Let me know if this works (or doesn’t work)!

2 Likes
#10

Thank you @david2! By changing the trigger to be “Do when condition is true” instead of on page load, that fixed the problem.

This will help with future animations as well, so thanks a bunch!

#11

@callen.hedglen You are very welcome! Let me know if anything else comes up.

#12

Hi @david2, thanks for this plugin.

Is there an issue currently with it? It used to work fine, but it doesn’t anymore.

I don’t think I’ve made any change to my page (editor link) that would have impacted it…

#13

Hey @Lucien - thanks for using it!

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?

Apologies for the lack of a real resolution here!

1 Like
#14

Thank you so much for taking the time to look into this David.

I tried to remove everything and redo it, but it doesn’t seem to do the trick, unfortunately.

Never mind, it was just “nice to have”. There are other battles to fight :laughing:

#16

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

#17

Hi @david2 Is there any way to adjust the speed of the Ease function?

#18

Love it!

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!

#19

Hi!

This plugin is great, except that when you resize the page, it duplicates the data?

Is there a reason for this and a way to prevent it?

It would otherwise be perfect.

Thanks in advance for any advice.