Counter not initializing

FilipaPF — Tue, 15 Nov 2022 20:13:26 GMT

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:

The output:

What am I missing?

Thank you!

Re: Counter not initializing

alyssamwilie — Tue, 15 Nov 2022 19:48:39 GMT

When I remove that first line in the if statement it works.

header.classList.add('go');

header isn't defined anywhere in the code so it's breaking there. If you were trying to get the header element you should use document.querySelector('header') but based on the rest of your code I'm not seeing any purpose for that so I'd just remove the line.

Will note this only works in-page and not in the module preview since we're unable to activate a scroll event when in module preview.

Re: Counter not initializing

FilipaPF — Tue, 15 Nov 2022 20:12:48 GMT

That's it!! It works now! Thank you very much 🙂

topic Re: Counter not initializing in CMS Development

Counter not initializing

Re: Counter not initializing

Re: Counter not initializing