<div class="o-counter">
	<div class="row jq_equal_row">
		<div class="col-sm-12 col-lg-6 text-center">
			<div class="o-counter__number"> $<span class="jq_counter" data-start="0">20</span>
			</div>
			<p class="o-counter__title" data-equal-group="heading">
				<strong> Title 01 </strong>
			</p>
			<p class="o-counter__perex">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do&nbsp;eiusmod tempor.</p>
		</div>
		<div class="col-sm-12 col-lg-6 text-center">
			<div class="o-counter__number">
				<span class="jq_counter" data-start="19">53</span>+ </div>
			<p class="o-counter__title" data-equal-group="heading">
				<strong> Title 02 </strong>
			</p>
			<p class="o-counter__perex">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>
		<div class="col-sm-12 col-lg-6 text-center">
			<div class="o-counter__number">
				<span class="jq_counter" data-start="0">8</span>mil </div>
			<p class="o-counter__title" data-equal-group="heading">
				<strong> Title 03 </strong>
			</p>
			<p class="o-counter__perex">Ut enim ad minim veniam.</p>
		</div>
		<div class="col-sm-12 col-lg-6 text-center">
			<div class="o-counter__number">
				<span class="jq_counter" data-start="99">256</span>K </div>
			<p class="o-counter__title" data-equal-group="heading">
				<strong> Title 04 </strong>
			</p>
			<p class="o-counter__perex">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do&nbsp;eiusmod tempor.</p>
		</div>
	</div>
</div>

.o-counter {

    &__number {

        @include font-family(first, bold);
        @include font-size(xx-large);

    }

}

import $ from 'jquery';

import Polyfills from 'js-src/common/polyfills';

export default class Counter {
	constructor(config = {}) {
		this.config = config;

		if (this.test()) {
			Polyfills.io(() => {
				var $items = $('.jq_counter');

				var viewport = new IntersectionObserver((items, self) => {
					$.each(items, (i, item) => {
						if (item.isIntersecting || item.intersectionRatio > 0) {
							var $el = $(item.target);
							var start = $el.data('start') || 0;
							var time = $el.data('time') || 1000;
							var number = $el.text();

							$el.prop('Counter', start).animate({
								Counter: number
							}, {
								duration: time,
								easing: 'swing',
								step: (up) => {
									if ('format' in this.config &&
										typeof this.config.format == 'function') {
										up = this.config.format(up, number);
									} else {
										up = Math.ceil(up);
									}

									$el.text(up);
								}
							});

							self.unobserve(item.target);
						}
					});
				}, {
					threshold: .5
				});

				$items.each((i, item) => viewport.observe(item));
			});
		}
	}

	test() {
		return $('.jq_counter').length ? true : false;
	}
}

$(() => new Counter);