[FEATURE REQUEST] Allow percentages in from/to for components in applyTo

[aeberlin]

The general idea is to allow something like this:

$elements = $('#foo') # assume <div> element with width and height equal to 100px

animation = new Bounce()

animation.translate(
  from: { x: 0, y: 0 },
  to: { x: 0, y: '100%' }, # Translate up 100% (at time of evaluation, 100px)
  easing: 'bounce',
  duration: 1500,
  delay: 0,
  bounces: 2,
  stiffness: 5
).translate(
  from: { x: 0, y: 0 },
  to: { x: '100%', y: 0 }, # Translate right 100% (at time of evaluation, 100px)
  easing: 'bounce',
  duration: 1500,
  delay: 0,
  bounces: 2,
  stiffness: 5
)

animation.applyTo($elements)

The reason is that it makes bounce animations much more dynamic with respect to either the current DOM properties of the applied elements (and could be even more flexible if we could interpolate with the current values established by previous components in the chain).

EDIT: After further thought and inspection, I'm wondering - is this even possible with the usage of matrices?

Let me know. Thanks, cheers.

[aeberlin]

I did notice this issue (#8), but I think it's worth more investigation now than ever with rapidly increasing screen resolutions.

[aeberlin]

The only way I can immediately think of would be to apply the animation to each element in an iterative fashion, and then apply each component in an iterative fashion. Then, in each component, transform percentages into decimals based on the valid dimension (x, y) of the element being acted upon, and proceed as normal. Otherwise, the only other option I can think of would be to enable Bounce to avoid matrices in keyframe output, which seems like an equally intensive set of changes, but possibly more future-proof.

EDIT: transform-primitive seems to be gaining on matrix transform, see this link.

EDIT 2: transform-primitive is faster than matrix transform on webkit, but not firefox. Either way, the difference isn't as extreme as it used to be, so I definitely think the discussion should be reopened.

[corysimmons]

👍 <- helpful

Bounce seems great but I can't imagine ever actually using it without percentage support.

This project also seems unmaintained. I'll look into learning the math (holy crap..) and maybe making a new project.