Tellende cijfers
Telt een getal live op zodra het in beeld komt — perfect voor statistieken als '1200+ klanten' of '99,9% uptime'.
Maakt van een droog getal een blikvanger: het cijfer telt live op van nul naar de eindwaarde zodra het in beeld scrolt. Met een voor- of achtervoegsel en decimalen bepaal je de weergave. De technische naam is GsapCounter.
Gebruik dit block voor statistieken die vertrouwen moeten wekken: klantaantallen, uptime-percentages, jaren ervaring. Het aftellen naar de eindwaarde trekt net iets meer aandacht dan een statisch cijfer, zonder dat het afleidt van de rest van de pagina.
Combineer GsapCounter met FormatNumber wanneer de eindwaarde een bedrag of percentage met een specifieke notatie moet krijgen, en met GsapReveal als de hele sectie eromheen ook moet infaden zodra de bezoeker scrolt.
Gebruiksscenario's per site-type
Op de homepage van een zakelijke dienstverlener staat GsapCounter vaak in een statistiekenrij vlak onder de hero: aantal klanten, jaren ervaring, afgeronde projecten. Een webshop gebruikt dezelfde techniek voor bijvoorbeeld het aantal verkochte producten of het gemiddelde beoordelingscijfer, vaak gecombineerd met de opmaak van FormatNumber voor het juiste decimaalteken. Op een portfolio-site is een tellende teller minder gebruikelijk maar wel effectief bij een enkel indrukwekkend kengetal, zoals het aantal gewonnen awards of jaren aan ervaring van de maker.
Veelgemaakte fouten en performance
Een veelgemaakte fout is te veel tellers tegelijk op één pagina zetten — boven de drie of vier tellers verliest het effect zijn kracht en oogt de pagina onrustig. Kies de statistieken die het meest overtuigend zijn en laat de rest gewoon staan als tekst.
Zet de starttijd van de animatie niet te lang: een teller die pas na een paar seconden op gang komt, voelt traag aan. Gebruik een duration van ongeveer één tot twee seconden voor het prettigste resultaat. Omdat het aftellen alleen start zodra het element in beeld scrolt, kost dit block geen laadtijd bovenaan de pagina — de animatie wordt pas geactiveerd wanneer de bezoeker daadwerkelijk zo ver scrolt, wat gunstig is voor de waargenomen performance.
Houd de begin- en eindwaarde dicht bij realistische cijfers: een teller die van 0 naar 1.000.000 oploopt in twee seconden oogt eerder overdreven dan overtuigend. Combineer de teller eventueel met GsapPin als het cijfer zelf, en niet alleen de sectie eromheen, de hoofdrol moet spelen tijdens het scrollen.
Voorbeeld
1.200+
klanten
99,9%
uptime
De prompt voor dit voorbeeld
Zet twee tellers op de pagina die oplopen zodra je ze ziet: 1200+ klanten en 99,9% uptime.