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>
