Access current tweened element with snap object syntax

[AdD959]

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

[ddi-web-team]

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})
}

 

[AdD959]

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.

[ddi-web-team]

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.