Specify an ease on an animate property?

Questions
1

Is it possible to set properties to animate on different eases? For example, x and y on a quadIn and scale on a backOut?

If not, would doing either an animateCall: () => {...} and manipulating the properties manually or a separate disp.animate() for the different properties be more performant? Or...? Thanks for any advice!

2

There is a custom ease added in ZIM CAT. You can pass these numbers into the custom ease format - see the ease parameter of animate in the Docs.

https://zimjs.com/cat/ease.html

I guess it works okay... we built a few eases - snap, ballistic, and slomo

https://zimjs.com/cat/easeexamples.html

3

Here's false code of what I mean by using a different ease per-property:

animate({
props: {
x: {ease: "quadIn", value: newX},
y: {ease: "quadIn", value: newY},
scale: {ease: "backOut", value: newScale}
});

Is there a structure for that? Or, should I use different animate calls? Or calculate it manually per-tick (if so, what is the per-tick call?) Or...?

Thanks!

4

Oh, I see. You would just put them in different animate() calls - you can chain on as many as you need. Same with if you need a different time. You can specify a different ease for rewind in the same animate call.

5

I guess we could look into providing a format like that - will put it on the list to consider.

7

Maybe - but then my request might be specific since it ignores the "time" part. I mean if time could be put in there as well then it would basically look like the series idea, except run in parallel. Then there might be the consideration of how "call" would work.

I like the idea of configuring a bunch of parallel animations under one animate call because it allows me to apply a configuration directly to a call, instead of having to build out animate calls, but again that might just be my problem. I often have to loop or duplicate animate calls to get things going "together".

Thanks for the reponses!

1 Like
8

while I have you here... I just asked a question about the name of an interface. Could you take a look and let me know if you know?

1 Like