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