Hello all,
unfortunately I could not find a reference to my question, which is why I am asking now (hopefully not again).
I want to implement a counter on my website, which counts up 3 different fields with corresponding values.
The code for this was created in a viewportEnter event.
This works also everything so far as desired. But when I scroll down on the page itself, then come to the counter, the individual values count up. If I leave the viewport (scroll further) and then go up again, the counters count up again.
What options do I have to prevent this? The values should only count up once and then remain at their final values.
Thank you very much for your help!
If more information is needed, please just let me know. Please apologize in advance if I just forgot essential necessary things, this is my first post here and I feel I have provided all the information. I don't think the exact code that is currently being used is necessary to find a solution. If it is, please teach me better!
Hi @Nils Schlüter 🖐
Just add a Boolean to track whether the count-up has started or not.
let started = false; $w('#section').onViewportEnter(() => { if (!started) { started = true; countUp(); } })
Hope this helps~!
Ahmad
Hello together,
thank you very much!
I tried Ahmad's suggestion (since he already included appropriate code) and was able to implement it exactly as desired with his tip.
Thanks for your help and the quick answers!
Have a nice weekend! 😊
1) way-: creating a lock-function.
-you scroll
-onViewport gets fired
-counter counts+1
-functions locks after is has a count bigger than --> 0
Way-2; collect all viewed items in an Array...
-you scroll-down
-viewport gets fired
-you check array, if item already existing in array
-if not item is pushed into array
Something like this...