I have an animation on my webpage where stat numbers count up to reach to a target number. I want this animation to start only when this section scrolls into view, otherwise the animation will already be donw by the time the user gets to that section!
How can I do that?
Here is a link:
[ https://www.boneiolam.org/index2#services](https://www.boneiolam.org/index2#services)
The numbers in the circles count up
Gitty
0
Newbie Poster
Recommended Answers
Jump to PostThere are indeed many plugins for this, but if it's just for this one animation then you can/should do it without a plugin. I see you use a jquery plugin for the counters …
Jump to PostThere are a couple of things wrong with your implementation.
$(window).on('resize scroll', function() { $('.timer').countTo('start') ({ formatter: function (value, options) { return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ','); }, onUpdate: function (value) { console.debug(this); }, onComplete: function (value) { console.debug(this); } }); });
You run the timer as soon as you …
Jump to PostI've just included the formatter in my codepen and it works fine.
All 9 Replies
rproffitt
2,580
"Nothing to see here."
Moderator
gentlemedia
803
Master Poster
Gitty
0
Newbie Poster
gentlemedia
803
Master Poster
Gitty
0
Newbie Poster
gentlemedia
803
Master Poster
Gitty
0
Newbie Poster
gentlemedia
803
Master Poster
john_111
88
Junior Poster in Training
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.