SOW : Count animate
SOW plugins are part of Smarty Core, written from scratch!
src/js/sow.core/sow.count_animate.js
Overview
- count up
- count down
- show/hide container when counter ended
- toggle multiple targets (like monthly/yearly pricing)
- optional callback when counter ended
- math function - useful for prices
- select switch
Count Animate Basic
SMARTY REVIEW
Smarty Customers
SATISFACTION
Lightweight & Fast
<span data-toggle="count"
data-count-from="0"
data-count-to="1000"
data-count-duration="2500"
data-count-decimals="0">0</span>
Cont animate Toggle
START
$0.30 per hour
Admin Template Included
Modern & Trendy
Flexible and modular
Cuntinuously supported
Free updates included
BUSINESS
$0.45 per hour
Admin Template Included
Modern & Trendy
Flexible and modular
Cuntinuously supported
Free updates included
ENTERPRISE
Enterprise-grade solutions for high volume merchants, and large businesses. We offer a 10% discount on annual plans and a 20% discount on biennial plans.
(+01) 555-5555
<!-- Toggler -->
<label class="d-flex align-items-center mx-3">
<input class="d-none-cloaked" type="checkbox" name="switch-checkbox" value="1" data-count-target=".pricetable-count">
<i class="switch-icon switch-icon-primary"></i>
</label>
<!-- Number -->
<span class="pricetable-count"
data-toggle="count"
data-count-decimals=""
data-count-from="0"
data-count-to="19"
data-count-duration="1500"
data-count-toggle='[
{"from":"0", "to":"19", "duration":800},
{"from":"19", "to":"150", "duration":800}
]'>19</span>
Counter Animate Hide/Show
Hide on counter finish
0
Show on counter finish
0
<!-- hide container on counter end -->
<h1 data-toggle="count"
data-count-decimals=""
data-count-from="0"
data-count-to="1000"
data-count-duration="3000"
data-count-oncomplete='{"target":"#hide_me", "action":"hide"}'>0</h1>
<div id="hide_me" class="p-3 rounded bg-danger-soft">
I'll be gone!
</div>
<!-- show container on counter end -->
<h1 data-toggle="count"
data-count-decimals=""
data-count-from="0"
data-count-to="1000"
data-count-duration="3000"
data-count-oncomplete='{"target":"#show_me", "action":"show"}'>0</h1>
<div id="show_me" class="p-3 rounded bg-primary-soft hide-force animate-fadein">
Hello my friend!
</div>
Math Functions
Total: $29.00
<!-- total -->
<h3 class="text-danger mb-4">
<span class="text-muted">Total:</span>
$<span class="cart-example"
data-toggle="count"
data-count-decimals="2"
data-count-from="29.00"
data-count-to="29.00"
data-count-duration="350">29.00</span>
</h3>
<!-- item 1 -->
<div class="form-check mb-2">
<input class="form-check-input form-check-input-primary" type="checkbox" value="" id="item-1"
data-count-target=".cart-example"
data-count-math="39.00">
<label class="form-check-label" for="item-1">
$39.00 Smarty Template
</label>
</div>
<!-- item 2 -->
<div class="form-check mb-2">
<input class="form-check-input form-check-input-primary" type="checkbox" value="" id="item-2"
data-count-target=".cart-example"
data-count-math="10.00">
<label class="form-check-label" for="item-2">
$10.00 Nintendo Joystick
</label>
</div>
<!-- item 3 -->
<div class="form-check mb-2">
<input class="form-check-input form-check-input-primary" type="checkbox" value="" id="item-3"
data-count-target=".cart-example"
data-count-math="8.50">
<label class="form-check-label" for="item-3">
$8.50 Smarty Game
</label>
</div>
Update On change
Price: $42.00
<!-- price -->
<h3 class="text-danger mb-4">
<span class="text-muted">Price:</span>
$<span id="price-select"
data-toggle="count"
data-count-from="42.00"
data-count-to="42.00"
data-count-duration="350">42.00</span>
</h3>
<!-- select -->
<select class="form-select" data-count-target="#price-select">
<option value="1" data-count-math="42.00" selected="">$39.00 (single license)</option>
<option value="3" data-count-math="299.99">$299.99 (multiple license)</option>
<option value="4" data-count-math="4500.00">$4500.00 (extended license)</option>
</select>
Using Button
<a href="#"
data-count-target=".toggle-example-10"
class="btn btn-primary">
<span class="group-icon">
<span>Monthly</span>
<span>Yearly</span>
</span>
</a>
<span class="toggle-example-10"
data-toggle="count"
data-count-decimals=""
data-count-from="0"
data-count-to="29"
data-count-duration="2000"
data-count-toggle='[
{"from":"98", "to":"29", "duration":2000}
]'>29</span>