AdD959 Posted September 13, 2022 Share Posted September 13, 2022 I have 3 unknown numbers of varying sizes that I want to animate smoothly from 0 to their value using the innerText property. In the example provided, the numbers are 10, 100 and 1000. For a number like 10, I want to iterate from 0-10 with intervals of 1 over a period of say 2 seconds. For a number like 1000 I of course do not want to iterate with intervals of 1 and therefore want use the snap object syntax to set the interval rate at something like 10. The interval time is set on the target element as a data attribute ( data-interval ) so all I need to do is access this value from within the snap object. However, unlike with innerText and scrollTrigger (see code below and on codepen), I don't seem to be able to access this data attribute from the snap object. So my question is, what options do I have here? Is there a way to access this data attribute? An even better solution would be to use some calculation to assign an appropriate interval number to each target (e.g. 10 / 10 = 1, or 100 / 10 = 10) and therefore not rely on a data-attribute at all. Javascript (broken due to line 5) let stats = document.querySelectorAll('div > h3 > span'); gsap.to(stats, { innerText: (i, el) => el.dataset.value, snap: { innerText: (i, el) => el.dataset.interval, }, duration: 2, ease: 'none', scrollTrigger: { trigger: (i, el) => el, markers: true, start: 'center bottom' } }) HTML <div> <h3> <span data-value="10" data-interval="1">0</span> </h3> </div> <div> <h3> <span data-value="100" data-interval="10">0</span> </h3> </div> <div> <h3> <span data-value="1000" data-interval="1000">0</span> </h3> </div> See the Pen KKRgbXm?editors=1010 by adam-cummings (@adam-cummings) on CodePen Link to comment Share on other sites More sharing options...
Solution ddi-web-team Posted September 13, 2022 Solution Share Posted September 13, 2022 Is this what you're looking for? See the Pen d87d5a5aa0dddcde12ddc5d7deb87404?editors=1111 by DDI-Web-Team (@DDI-Web-Team) on CodePen const stats = document.querySelectorAll('div > h3 > span'); for (const stat of stats){ gsap.to(stat, {innerText: stat.dataset.value, snap:{innerText:stat.dataset.interval}, duration:3}) } 3 Link to comment Share on other sites More sharing options...
AdD959 Posted September 13, 2022 Author Share Posted September 13, 2022 Hi ddi-web-team, thanks for the response. Yes this does work! The only issue is that I'm not sure if more complication arrives when adding a scrolltrigger into the works. However this does answer my question so thank you. Link to comment Share on other sites More sharing options...
ddi-web-team Posted September 13, 2022 Share Posted September 13, 2022 10 minutes ago, AdD959 said: Hi ddi-web-team, thanks for the response. Yes this does work! The only issue is that I'm not sure if more complication arrives when adding a scrolltrigger into the works. However this does answer my question so thank you. I don't think scrollTrigger was the problem. The main difference between our code is I'm looping through every 'stat' inside the node list and applying a tween to it. Your original code is applying a single tween to a node list. Not even sure if that works. I updated my example to have scrollTrigger so it more closely matches your original intent. 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