new Feature: Flaps

[msoler75]

I'm submitting a new feature

[ ] Bug Fix
[ x ] Feature
[ ] Other (Refactoring, Added tests, Documentation, ...)

Checklist

• [ x ] Test your changes
• [ x ] Followed the build steps

Description

Flap digits are now possible in counter.js

The number digits (comma separator are affected too) are represented like vertical flaps appearing from bottom. You can choose the animation time and the last digit delay time.

The changes are incorporated in demo and readme.

Does this PR introduce a breaking change?

[ ] Yes
[ x ] No

[inorganik]

Hey Marcel, I cloned your branch and tried it out. This is really cool! I experimented with it in different ways and was impressed with how well it held up. The animation looks great, and I like how you handled separators.

However, rather than merge this directly into CountUp, I would like to propose an alternative: that CountUp support plugins, and you create a separate repo and npm package for just your plugin code. Let me explain my thinking:

1. Plugin architecture allows for endless extensibility. You created this style of animating the numbers, and there are other ways, let's allow for all of them!
2. This is an alternate way to animate numbers that many people won't need, let's not ship code that isn't being used. Allow users to opt-in to alternative animations if they want them
3. There is a good chance someone will figure out a way to break this - I would rather allow you, the author to fix, maintain, and improve this code

As part of supporting plugins, I would like to call out each available plugin in the README of CountUp with a sample image, explanation, package name and author credit. I would also add an explanation of how to use it.

So, I think it's a win-win - you get credit for your work, and I don't have to maintain this code or ship it for users that aren't using it. Finally we can allow for more animation styles to be added later.

I would like to proceed this way: I will design an API for plugins, based on how you have hooked into CountUp. We can collaborate how best to do this. I'm thinking the plugin package will export a render function that will get invoked instead of printValue. For users who just want to use CountUp as-is, there will be no change, but for plugins, they will install your plugin, and pass it as an option to CountUp. I will start a discussion in this repo and tag you.

Once we have the plugin design figured out, you can publish your plugin, and I will link it in the README with a new release of CountUp. I'm thinking it will be minor because there will be no breaking changes. Sound good?

[inorganik]

By the way, I notice you called this "flaps", but that doesn't really match the animation style - I think you should call it something else like "odometer" or barrel-style:

Flap clock:

barrel style:

[msoler75]

I would like to proceed this way: I will design an API for plugins, based on how you have hooked into CountUp. We can collaborate how best to do this. I'm thinking the plugin package will export a render function that will get invoked instead of printValue. For users who just want to use CountUp as-is, there will be no change, but for plugins, they will install your plugin, and pass it as an option to CountUp. I will start a discussion in this repo and tag you.

Once we have the plugin design figured out, you can publish your plugin, and I will link it in the README with a new release of CountUp. I'm thinking it will be minor because there will be no breaking changes. Sound good?

Agree, it's a way to enhance the capabilities of the library. Well, precisely I needed the basic fundamentals of a counter to create a numerical animation. So it can happen to other programmers like me.

I'll be waiting for when the first API draft is ready, and I'll provide any suggestions if I see it necessary. Of course I will try to make my plugin work the same as now with the new API.

By the way, I notice you called this "flaps", but that doesn't really match the animation style - I think you should call it something else like "odometer" or barrel-style

Nice information, I will eventualy change the name to odometer or barrel. Thanks!

[inorganik]

Thanks Marcel, take a look at the discussion here - I've proposed an api. #306

[inorganik]

Closing this so we can proceed with the plugin architecture. Plugins are now supported in 2.6.0: #307

Please create your plugin package, and I will update the readme with a link to it!