Its_Lefty Posted June 27, 2022 Share Posted June 27, 2022 Hi there! I'm trying to integrate a continuous count up / down of multiple numbers (each of them with a specific value) on a horizontal scroller (based on a pen by @mikel) Since I'm still learning JS, I am struggling to integrate the sample code to my project. At the moment nothing happens at all. The console log says that the var numbers are not applied to the timeline but I don't know how to exacly re-write the code. Sorry if the code is a bit messy, the count part begins at line 46. Thanks for any help! :) See the Pen PoRYaPL by ItsLefty (@ItsLefty) on CodePen Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted June 27, 2022 Solution Share Posted June 27, 2022 HI @Its_Lefty is this something what you are looking for. I've updated `textContent` instead of `var` and set `snap: { textContent: 1 }` to snap to whole numbers. See the Pen ZExzjRq?editors=0111 by mvaneijgen (@mvaneijgen) on CodePen 1 Link to comment Share on other sites More sharing options...
Its_Lefty Posted June 27, 2022 Author Share Posted June 27, 2022 Nice, thanks a lot and for explaining the issue! Would it be possible though to increase the number dynamically along the scroll-section (start to end marker) like mikels pen? So that if you reach the start, the number starts at 0 and if you keep on scrolling until the end, the final value will be displayed (if you scroll back it should be reversed). Link to comment Share on other sites More sharing options...
mvaneijgen Posted June 27, 2022 Share Posted June 27, 2022 Take a look at the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger If you want the ScrollTrigger animation too animate with the user scrolling you'll need to take a look at the `scrub` property. Adding `scrub: true` to the ScrollTrigger object should be all you need. And also check the `toggleActions`, there you can set what the animation needs to do when onEnter, onLeave, onEnterBack, and onLeaveBack. Be sure to also check the video on the docs page, everything is explained in detail in there. 1 Link to comment Share on other sites More sharing options...
Its_Lefty Posted June 27, 2022 Author Share Posted June 27, 2022 (edited) It is working now. The timings might need some adjustments though and I will have a look at the toggleActions. Thanks for your help! @mvaneijgen I need to add one decimal place (for example 100,5). I've modified the code using toFixed(1) but something is wrong now with the counting (I hope you don't mind me asking since it's not really GSAP-related): See the Pen mdxbGKx by ItsLefty (@ItsLefty) on CodePen Edited June 27, 2022 by Its_Lefty updated code / new issue Link to comment Share on other sites More sharing options...
mvaneijgen Posted June 28, 2022 Share Posted June 28, 2022 @Its_Lefty international number, or just numbers that don't fall in the norm are always difficult. I've now changed the comma `,` to a dot `.`, set the snap value to `0.1` and then the code works as expected (only the first one is edited). I've also updated the `onUpdate` function to get the number of the tween and then replacing the dot with a comma and that seems to work. See the Pen PoRoqzV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 1 1 Link to comment Share on other sites More sharing options...
Its_Lefty Posted June 28, 2022 Author Share Posted June 28, 2022 Awesome, thanks a lot! Working perfectly! Link to comment Share on other sites More sharing options...
Its_Lefty Posted June 29, 2022 Author Share Posted June 29, 2022 @mvaneijgen Sorry to bring this up again, but is it possible to always display one decimal? So that it displays for example 42,0 instead of 42. I've read about toFixed(1), but I don't know how to implement it here. Link to comment Share on other sites More sharing options...
GreenSock Posted June 29, 2022 Share Posted June 29, 2022 Check out the helper function in the docs: https://greensock.com/docs/v3/HelperFunctions#format 1 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