Independent delta not working in .then

[strukteon]

It seems like independent deltas don't work in .then() functions.

I am trying to create a jump animation using this code:

const circle = new mojs.Shape({
  top: 40,
  left: 40,
  y: {
    0: 100,
    easing: "cubic.out"
  },
  x: {
    0: 20,
    easing: "linear.none"
  },
  radius: 40,
  duration: 250,
}).then({
  y: {
    100: 0,
    easing: "cubic.in"
  },
  x: {
    20: 40,
  }
});

When adding any of the independent delta properties specified in https://mojs.github.io/api/modules/html/#independent-deltas, the .then() is ignored altogether.

Am I using it improperly or is there any fix for this?

[Sandstedt]

@strukteon Could you create a Codepen for us to test? But I think the problem here is the 0. If I remember correctly, if the key is a zero or negative values, you need to define it as a string instead of a number.

So "0" : "100"

[strukteon]

Weirdly enough, the value 0 works when not specifying any easing parameters. Also, some properties (like scale) can be used with a separate easing function.

Here's the codepen: https://codepen.io/strukteon-the-vuer/pen/jOYeBex

[xavierfoucrier]

Hi @strukteon,

Good catch, I confirm it's a bug!

You can workaround using a "global" easing define at the root of then, like this:

const scale = new mojs.Shape({
  top: 200,
  left: 500,
  scale: {
    0: 3,
    easing: "elastic.out"
  },
  x: {
    0: 200
  },
  radius: 40,
  duration: 1500
}).then({
  easing: "elastic.out", // x later will use this easing
  scale: {
    3: 1,
    easing: "cubic.in" // scale will properly use this easing
  },
   x: {
    200: 0
    // specifying an easing here won't work at all
  }
});

For the moment, I am not seeing any other workaround for this case, or you may need to build your animation in a different way.

[strukteon]

@xavierfoucrier Alright, thanks! 😃