Hello!
I created a custom module and inserted it into the html template. Everything seems to work fine except the counter is not initializing.
Here’s my module code:
HTML:
<div class="container-fluid bg-vg" id="corporate-stats">
<div class="container">
<div class="row justify-content-around py-3 text-center company-stats">
{% import "/vg-theme/templates/partials/stats.html" %}
{% for stat in stats %}
<div class="col-10 col-sm-2 py-5 py-sm-0">
<span class="company-stats-number text-vg3 fs-4"><span class="counter counter-{{ stat.shortname }}"></span><span class="counter-default">{{ stat.to_animate }}</span>{{ stat.animate_appendage }}</span>
<span class="company-stats-text text-white small">{{ stat.desc }}</span>
</div>
{% endfor %}
</div>
</div>
</div>
HTML partial:
{% set stats =
[
{ 'shortname' : 'oftop', 'displaynumber' : '30', 'to_animate' : '30', 'animate_appendage' : '', 'desc' : 'Lorem ipsum' },
{ 'shortname' : 'sites', 'displaynumber' : '300', 'to_animate' : '300', 'animate_appendage' : '+', 'desc' : 'Lorem ipsum' },
{ 'shortname' : 'systems', 'displaynumber' : '100,000+', 'to_animate' : '100', 'animate_appendage' : ',000+', 'desc' : 'Lorem ipsum' },
{ 'shortname' : 'users', 'displaynumber' : '30,000+', 'to_animate' : '30', 'animate_appendage' : ',000+', 'desc' : 'Lorem ipsums' },
{ 'shortname' : 'experience', 'displaynumber' : '17', 'to_animate' : '17', 'animate_appendage' : '', 'desc' : 'Lorem ipsum' }
]
%}
CSS:
.company-stats-number {
display: block;
}
@media only screen and (min-width: 35em) { /* wide screen */
{# starting values before animation #}
.counter-default { display: none; }
.company-stats-number { color: var(--color-lightblue_10); }
@property --num {
syntax: "<integer>";
initial-value: 0;
inherits: false;
}
.go.company-stats-number { animation: color_change 1s ease-in forwards; }
.go.company-stats-text { animation: fadein 1s ease-in forwards; }
.go.corporate-stats-header { animation: fadein .5s ease-in forwards; }
span.go.counter.counter-oftop { animation: counter 5s ease-in-out forwards; counter-reset: num var(--num); }
span.go.counter.counter-oftop { --num: 30 }
span.go.counter.counter-sites { animation: counter 6.5s ease-in-out forwards; counter-reset: num var(--num); }
span.go.counter.counter-sites { --num: 300 }
span.go.counter.counter-systems { animation: counter 7s ease-in-out forwards; counter-reset: num var(--num); }
span.go.counter.counter-systems { --num: 100 }
span.go.counter.counter-users { animation: counter 6s ease-in-out forwards; counter-reset: num var(--num); }
span.go.counter.counter-users { --num: 30 }
span.go.counter.counter-experience { animation: counter 4s ease-in-out forwards; counter-reset: num var(--num); }
span.go.counter.counter-experience { --num: 15 }
span.counter::after {
content: counter(num);
}
@keyframes counter {
from {
--num: 0;
}
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
JS:
window.addEventListener('scroll', function (event) {
var stats = document.querySelector('#corporate-stats');
var stats_position = stats.getBoundingClientRect();
var counter_object_containers = document.querySelectorAll('.company-stats-number');
var counter_objects = document.querySelectorAll('.counter');
var counter_descriptors = document.querySelectorAll('.company-stats-text');
if (
stats_position.top >= 0 &&
stats_position.left >= 0 &&
stats_position.right <= (window.innerWidth || document.documentElement.clientWidth) &&
stats_position.bottom <= (window.innerHeight || document.documentElement.clientHeight)
)
{
// console.log('v26');
header.classList.add('go');
for (var i = 0; i < counter_object_containers.length; i++) {
counter_object_containers[i].classList.add('go');
}
for (var i = 0; i < counter_objects.length; i++) {
counter_objects[i].classList.add('go');
}
for (var i = 0; i < counter_descriptors.length; i++) {
counter_descriptors[i].classList.add('go');
}
} else {
//
}
}, false);
The output:
What am I missing?
Thank you!
