Mike1988

Amazing! Thank you @mikel and @OSUblake ! You guys are the best!!!

Hi Oracles, The last post I said “update the variables”, sorry for that, actually is not variables but properties! At the problem B I tried to kill masterTl with the method .kill( ), then I made wordTl globally to be able to kill it as well. RESULT: I could update the values!!! But the old values still coming up, now every time when I click on those buttons it is coming with a new and old values, it is accumulating. At the problem A Using the method .kill( ) it didn’t work. I tried to apply the same tactical plan as I did with problem B. RESULT: Everything disappeared… Down below is the new code with .kill( ) method. https://codepen.io/mayconcabral/pen/wvJojYO The solution I am look for: When the button is clicked, the animation will reverse and it will come up again with the new text.

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

AWESOME! IT WORKED! THANK U!

Hi Oracle, @GreenSock That's my bad, sorry! and thank you for the minimal demo, I watched it. Well, I just would like to say that I am new on this field. A few months ago I started learning html, css and javascript through the internet by my own. It was yesterday that I found out about GreenSock and I became one of your disciples, you guys are awesome! Ok. here is the thing. I am using css transition:hover. The files are SVG, but they are in a tag <img> at html, then I use filter to be able to change their color because fill will not work. At the beggining the gear will rotate back but after few seconds it will spin normally, if this happen, please run the project again at codepen. https://codepen.io/mayconcabral/pen/KKWdJXb

I have the same issue, but I can't remove the css transition to solve the problem. I used a tag <img> to upload svg files and in order to change the svg color I used the property "filter". Is there any another way to solve this?