Animated steps() using splittext.

[maths]

Hi,

 

How can i apply the splittext functionality to a simple step() so each number in the counter gets its own animation? I would like each number, when it appears to get masked into view. Like you would do when using splittext and the classic "rolling text animation". See code:

 

import gsap from 'gsap'
import SplitText from 'gsap/SplitText'

gsap.registerPlugin(SplitText);


this.el = document.querySelector('[data-loader]')

this.progress = {
  value: 0
}

this.tl = gsap.timeline({
  paused: true
})

this.tl.to(this.progress, {
  duration: 2.5,
  ease: 'steps(100)',
  value: 100,
  onUpdate: () => this.el.innerHTML = Math.floor(this.progress.value)
})

this.tl.play()

/*
  Function i want to run to animate each number should look something like below:
*/

const split = new SplitText(this.el, {
  type: 'lines, words, chars', 
  linesClass:'overflow-hidden'
})

this.tl.to(split.words, {
  yPercent: 100, 
  duration: 0.1, 
  ease: 'circ.out', 
  stagger: 0.021
})

 

[GreenSock]

Are you talking about an effect where it looks like the digits in each spot are rolling in from below (and out above)? I'm having a hard time understanding exactly what you want, especially because you mention a "steps()" ease. Do you have a demo? You'll significantly increase your chances of getting an answer here if you put the time into creating a minimal demo, like a CodePen or Stackblitz with just the minimal amount of stuff to show what you're trying to do. 

[maths]

That is _exactly_ what i mean!

 

I can sure put together a demo, but it wont show what i'm after since i don't know how to do it. But your explanation sums it up perfect.

 

EDIT: the link you provided is broken

[GreenSock]

I don't have time to map it all out for you, but maybe this video from @Carl will be helpful and of course

 

 

The demo link should go here: 

 

[maths]

Thanks! Will look into it right away.