Hi Oracles,
What I am trying to do is a translation effect, once you click on the botton the animation will reverse back and will come up again with the new text. But I have two problems, the variables are not being updated on both of them.
Problem A; width:textWidth is not getting updated
let introTl = gsap.timeline();
introTl.to('.box', {duration: 1, width: textWidth, delay: 0.5, ease: 'power4.inOut'})
.from('.hi', {duration: 1, y:'7vw', ease:'power3.out', onComplete: ()=>{masterTl.play(); cursor.play()}}).from('p', {opacity:0})
Problem B; text: word is not getting updated
let masterTl = gsap.timeline({repeat:-1}).pause();
words.forEach(word => {
let wordTl = gsap.timeline({yoyo:true, repeat:1, repeatDelay:1});
wordTl.to('.text', {duration:1, text: word})
masterTl.add(wordTl)
})
https://codepen.io/mayconcabral/pen/poeNjva