Jump to content
Search Community

Conditional values are not re-evaluated on next play.

trych test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

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

Link to comment
Share on other sites

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. 

 

  • Like 5
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

 

 

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...