Animated Counter Plugin With jQuery And GSAP - lem_counter

lem_counter is a small yet configurable jQuery animated counter plugin for counting up or count down to a number you specify. The fast & performant count animation based on the GSAP's TweenLite.js library.

How to use it:

1. Load the needed jQuery nad TweenLite libraries in the html file.

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenLite.min.js"></script>

2. Load the lem_counter plugin's script lem_counter.js after jQuery.

<script src="lem_counter.js"></script>

3. Create a container where you want to display the animated counter.

<div class="myCounter"></div>

4. Call the function on the container element and specify the target number you want to count to.

$('.myCounter').lemCounter({
  value_to: 100
});

5. Specify the value you want to countdown from.

$('.myCounter').lemCounter({
  value_to: 100,
  value_from: 500
});

6. You can also specify the target number directly in the container element.

$('.myCounter').lemCounter({
  value_to_from_content: true
});

<div class="myCounter">
  100
</div>

7. To config the animation counter using the data attribute:

$('.myCounter').lemCounter();

<div class="myCounter"
     data-lem-counter='{"value_from": 200, "value_to": 100'>
</div>

8. All default configuration options.

$('.myCounter').lemCounter({
  value_from: 0,
  value_to: 0,
  locale: false, // e.g. 'en-US'
  value_to_from_content: false,
  animate_duration: 2
});

---

This awesome jQuery plugin is developed by lemehovskiy. For more Advanced Usages, please check the demo page or visit the official website.