Red Bag Posted February 22, 2021 Share Posted February 22, 2021 I'm using countup.js for number counter animation. How to trigger the number animation when horizontal scroll to the number? I had try to use waypoints.js but was not working. Link to comment Share on other sites More sharing options...
mikel Posted February 22, 2021 Share Posted February 22, 2021 Hey @Red Bag, Without seeing the context, here is an example. See the Pen zYoEEox?editors=1010 by mikeK (@mikeK) on CodePen Happy counting ... Mikel 4 Link to comment Share on other sites More sharing options...
Red Bag Posted February 26, 2021 Author Share Posted February 26, 2021 Hi @mikel , thanks for your reply but that's not what i need. What i means is when horizontal scrolltrigger to the number and the number will do countup animation. Link to comment Share on other sites More sharing options...
GreenSock Posted February 26, 2021 Share Posted February 26, 2021 @Red Bag can you please fork Mikel's example and show more about what you're trying to do? It isn't very clear from your description. These forums aren't intended to be a place where you can describe something and have us build it for you. We're happy to answer any GSAP-specific questions, of course, but you'll have the best chance of getting a good answer if you provide a CodePen demo (even if it's not totally working, of course). I'm quite confident that anything you dream up is entirely possible to accomplish with GSAP & ScrollTrigger...we just need to understand what you're trying to do and see it in context. Link to comment Share on other sites More sharing options...
Red Bag Posted February 26, 2021 Author Share Posted February 26, 2021 Here is my demo. See the Pen xxRYOBr by redbad (@redbad) on CodePen When scroll to next section the "Number" will do countup animation not for starting to animated only. Link to comment Share on other sites More sharing options...
GreenSock Posted February 26, 2021 Share Posted February 26, 2021 When exactly would the number start counting up? When that section touches the left side of the screen? The center? When it first enters from the right? Link to comment Share on other sites More sharing options...
Red Bag Posted February 26, 2021 Author Share Posted February 26, 2021 Yes, when it first enters from the right. When scroll to the right section, the number will start counting animation Link to comment Share on other sites More sharing options...
akapowl Posted February 26, 2021 Share Posted February 26, 2021 Hey @Red Bag Since you are not using native horizontal scrolling, but 'faking' the horizontal scroll with a tween on vertical scrolling, you'd have to do some calculations yourself for detecting when the section you want to adress, actually comes into viewport. This demo from the demo page See the Pen ZEpNLZa by GreenSock (@GreenSock) on CodePen as well as these threads might be helpful for you to understand how that could be achieved The second thread linked contains a lengthy explanation on when and why you'd have to also calculate an 'offset' - which in your case won't be neccessary because your fake horizontal ScrollTrigger's duration is equal to the amount you translate each section to the left. So you'd want to leave that out and just calculate based on the offsetLeft of each section (or the jQuery equivalent) and the window's width. Instead of using the jQuery countup, I'd recommend counting the text up with GSAP ( just like mikel showed is a great way ) so you have more control over it. Hope this helps. 5 Link to comment Share on other sites More sharing options...
Red Bag Posted March 3, 2021 Author Share Posted March 3, 2021 I had tried to use gsap to do the number animation but still can't to do as when scroll to start the animation. See the Pen xxRYOBr by redbad (@redbad) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted March 3, 2021 Share Posted March 3, 2021 I assume you meant something like this?: See the Pen 78f10cfa3794bcefde412991bf8782ba?editors=0010 by GreenSock (@GreenSock) on CodePen The basic idea is to just use an onEnter to do the tween, like this: onEnter: () => { gsap.to(count, { innerText: count.getAttribute("data-number"), snap: {innerText: 0.01}, duration: 2 }); } 2 Link to comment Share on other sites More sharing options...
Red Bag Posted March 3, 2021 Author Share Posted March 3, 2021 Yes, this is what I mean but i found a problem, if the first section don't had the number animation, the rest of the number animation is not working when scroll to. See the Pen xxRYOBr by redbad (@redbad) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted March 3, 2021 Share Posted March 3, 2021 In a case a such, you could avoid that error e.g. by checking if the section has a certain class before creating the counter-ScrollTriggers ( I added a class of 'counter' to your counter-sections here ). You could either do so inside of the forEach for the sections like this sections.forEach((sct, i) => { if (sct.classList.contains("counter")) { const count = sct.querySelector(".count"); ScrollTrigger.create({ ... }) } }) See the Pen 070241cecb186c54a93831963048b3dd by akapowl (@akapowl) on CodePen ...or probably better, you could at the start create an array with only those counter-sections like you did for the other sections and have the forEach-loop loop over that array instead. let sections = gsap.utils.toArray(".module"), countSections = gsap.utils.toArray(".module.counter"), container = document.querySelector("#container"), scrollTriggerEnabled; countSections.forEach((sct, i) => { const count = sct.querySelector(".count"); ScrollTrigger.create({ ... }) }); See the Pen 43a73267fda4d19d4520a4c0d2bd2462 by akapowl (@akapowl) on CodePen 3 1 Link to comment Share on other sites More sharing options...
Red Bag Posted March 4, 2021 Author Share Posted March 4, 2021 I am grateful for all your support. I'm new to learn GSAP, hope you all don't mind I got many question. One more question, if the section got more than 2 numbers, how it could do for all to animated? And the animation was done once only, can it be loop when scroll to right again? See the Pen xxRYOBr by redbad (@redbad) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted March 4, 2021 Share Posted March 4, 2021 Sure, just use querySelectorAll() and a forEach(): sct.querySelectorAll(".count").forEach(count => { ... }); See the Pen d7d2611c70e23b8c6a56b41545695c9b?editors=0010 by GreenSock (@GreenSock) on CodePen Is that what you're looking for? 2 1 Link to comment Share on other sites More sharing options...
Red Bag Posted March 4, 2021 Author Share Posted March 4, 2021 Thanks a lot for all your help~ Link to comment Share on other sites More sharing options...
Red Bag Posted April 14, 2021 Author Share Posted April 14, 2021 Hi, I facing a problem, due to the number's length, the counter number animation in slider become not stable and seems like "vibrating". Any solution ? https://codepen.io/redbad/pen/xxRYOBr Link to comment Share on other sites More sharing options...
GreenSock Posted April 14, 2021 Share Posted April 14, 2021 Why not just set a fixed width on the container? That's probably the easiest solution. Or I suppose you could use a fixed-width font and pad your numbers so they're always the same quantity. Link to comment Share on other sites More sharing options...
Red Bag Posted April 20, 2021 Author Share Posted April 20, 2021 How to display running number (having zero in decimals) as now the code not able detect the zero. example: 1.60 and the code only able to display 1.6 See the Pen poRxgLo by redbad (@redbad) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted April 20, 2021 Share Posted April 20, 2021 That's what .toFixed() is for. You could toss that into a modifier: modifiers: { innerText: value => value.toFixed(2) } Or an onUpdate: onUpdate() { count.innerText = parseFloat(count.innerText).toFixed(2); } See the Pen 2f8e739ef1237e354f3b5a2304ae1256?editors=0010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Red Bag Posted April 21, 2021 Author Share Posted April 21, 2021 Thanks a lot~ Link to comment Share on other sites More sharing options...
Red Bag Posted April 21, 2021 Author Share Posted April 21, 2021 Sorry Jack, I found out when the number had " , " (comma), the horizontal scroll will broken and the below code will change the comma to dot. onUpdate() { count.innerText = parseFloat(count.innerText).toFixed(2); } See the Pen MWJPxgO by redbad (@redbad) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted April 21, 2021 Share Posted April 21, 2021 Then just use a proxy object and then format things in an onUpdate: See the Pen a481d19080b552c3f1620cd6ac205619 by GreenSock (@GreenSock) on CodePen Format function that takes a number, adds commas, and a fixed number of decimal places: function format(value, decimals) { const a = value.toFixed(decimals).split("."); return a[0].replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,") + "." + a[1]; } Link to comment Share on other sites More sharing options...
Red Bag Posted April 21, 2021 Author Share Posted April 21, 2021 That's great, but if the number without decimals or some of number we wish not to have more than 1 decimals, how can we hide it ? Link to comment Share on other sites More sharing options...
GreenSock Posted April 21, 2021 Share Posted April 21, 2021 13 minutes ago, Red Bag said: That's great, but if the number without decimals or some of number we wish not to have more than 1 decimals, how can we hide it ? Didn't you just say earlier that you always want it to keep 2 decimal places?: 21 hours ago, Red Bag said: example: 1.60 and the code only able to display 1.6 I'm confused. These are general logic questions that are unrelated to GSAP - we really try to keep these forums focused on GSAP-specific questions whenever possible. You should be able to just add some conditional logic to your onUpdate to do the formatting according to whatever logic you want. For example, if you want the function to skip the decimal for whole numbers: function format(value, decimals) { const a = value.toFixed(decimals).split("."); return a[0].replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,") + ((value | 0) === value ? "" : "." + a[1]); } Good luck! Link to comment Share on other sites More sharing options...
Red Bag Posted April 21, 2021 Author Share Posted April 21, 2021 Sorry as I english not good to explained what i mean. Anyway, thanks for your help. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now