Conditional values are not re-evaluated on next play.

[trych 11 Likes (Newbie)]

Hi there!

I have assigned some hover effect to some circle, so they scale up when I hover over them. Depending on some boolean value they should occasionally scale down instead. I managed to set this up in a way that the current boolean value is handled on the the first initialisation of each circle's tween. However, if I then switch the flag again, each previously initiated circle keeps the scale value that it was assigned initially, altough I am using repeatRefresh: true. Any idea how I have to set this up differently to have every circle always behave according to the current value of my boolean?

Thanks!
trych

See the Pen JjWEXBZ by trych (@trych) on CodePen

[Cassie 5,650 Likes (Superhero)]

Heya!

 

You could create a new tween on hover? Currently your tween's created once per circle at run time and is unaffected when the button value changes

See the Pen 6cf2b426ed992aa8c24236590f386a1d?editors=0110 by cassie-codes (@cassie-codes) on CodePen

[OSUblake 18,534 Likes (Superhero)]

3 hours ago, trych said:

However, if I then switch the flag again, each previously initiated circle keeps the scale value that it was assigned initially, altough I am using repeatRefresh: true.

 

The reason that doesn't work is because your animations aren't repeating. You're just playing and reversing them over and over again.

 

repeatRefresh won't work in your situation, but for future reference, the animation would need to have a repeat in it.

gsap.to(c, {
  repeatRefresh: true,
  scale: () => largeDots ? 2 : 0.5, // gets re-evaluated on every repeat
  duration: 0.1,
  repeat: -1
});

 

That said, I would do it just like @Cassie showed. 

 

[trych 11 Likes (Newbie)]

Thank you @Cassie and @OSUblake, this really clears things up for me.

@Cassie, in your example do I have to somehow "get rid" the scale-up animation once I start the scale down animation? I realize animaiton-wise it gets overwritten, but is it still somehow active in the background so that it would be beneficial for me to actively remove it somehow?

[Cassie 5,650 Likes (Superhero)]

The tween isn't assigned to a variable so it's only in effect when it's triggered/playing. No need to remove it ☺️

[OSUblake 18,534 Likes (Superhero)]

7 hours ago, trych said:

I realize animaiton-wise it gets overwritten

 

Technically it doesn't. You just see the changes from the newest animation. Once the old animation runs it course, it will be removed, so in that sense you really don't need to worry about it.

 

This would only cause a problem if the durations are different, like here. If you quickly hover on and off the circles, it's going to do some weird stuff.

 

See the Pen 24b9ba7b0403dc58f3493c6cf1410c9e by osublake (@osublake) on CodePen

 

 

The solution is to use overwrite: true. This will immediately kill the previous animation.

 

Quote

overwrite

If true, all tweens of the same targets will be killed immediately regardless of what properties they affect. If "auto", when the tween renders for the first time it hunt down any conflicts in active animations (animating the same properties of the same targets) and kill only those parts of the other tweens. Non-conflicting parts remain intact. If false, no overwriting strategies will be employed. Default: false.

 

See the Pen 331b8647c24abb889eec9fb9af2655a3 by osublake (@osublake) on CodePen

 

 

 

[trych 11 Likes (Newbie)]

Thanks for the detailed explanation @OSUblake, I will go with overwrite: "auto" in this case then, as I indeed need to avoid this weird stuff, but also have other animations (of other properties) running on the same target.

[OSUblake 18,534 Likes (Superhero)]

Yep, in that case, "auto" is the best choice.