[updating variable via loop]

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

 

 

[updating variable via loop]

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.

 

See the Pen wvJojYO by mayconcabral (@mayconcabral) on CodePen

 

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.

 

[updating variable via loop]

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)

})

 

See the Pen poeNjva by mayconcabral (@mayconcabral) on CodePen

 

 

 

 

 

 

[infinite rotation]

22 hours ago, OSUblake said:

That's fine, you just can't use all as the property.

 

.icon{
    filter: invert(89%) sepia(54%) saturate(4856%) hue-rotate(314deg) brightness(109%) contrast(90%);
    width: 60px;
    height: 60px;
    margin: 25px 0; 
    transition: filter 0.5s ease;     
}
.icon:hover{
    filter: invert(87%) sepia(94%) saturate(1270%) hue-rotate(304deg) brightness(122%) contrast(92%); 
    transition: filter 0.5s ease;
}

 

 

AWESOME! IT WORKED! THANK U!

[infinite rotation]

12 hours ago, GreenSock said:

It would really help to have a minimal demo to look at, @Mikemcfly. If you're asking if you can have GSAP control the rotation of an element AND ALSO have a CSS transition controlling it, no, that should definitely be avoided and it's a logical impossibility. That being said, you could certainly nest it in a <div> that's being controlled by one, and the inner element is controlled by another. But I'm still rather confused about why you think you'd need both a CSS transition and a GSAP animation on the same element. Once we see that minimal demo, I'm sure it'll become more clear. 

 

Happy tweening!

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.

 

See the Pen KKWdJXb by mayconcabral (@mayconcabral) on CodePen

 

[infinite rotation]

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?