juliangarnier / anime

JavaScript animation engine
https://animejs.com
MIT License
50.4k stars 3.68k forks source link

Amplitudes for elastic easings seem to be applied incorrectly #811

Open jhobz opened 2 years ago

jhobz commented 2 years ago

Describe the bug The easing functions easeInElastic and easeOutElastic work perfectly as-intended with default values. But if I choose to increase the amplitude, I would expect the amplitude to affect the size of the existing overshoot, as described in the docs. I would interpret that to mean that for easeInElastic, the overshoot during the startup of the animation is increased or decreased, and for easeOutElastic, the end of the animation. However, the amplitude actually adds an overshoot to the opposite end of the animation (end for easeIn and beginning for easeOut). This seems to run counter to the intended uses of these functions. If this is intended behavior and not a bug, it may be worth clarifying in the docs (such as showing examples with amplitudes other than 1) to make it clear that "In" and "Out" are not exclusively describing where the elasticity happens in this curve.

To Reproduce Steps to reproduce the behavior:

  1. Create an animation with easing: 'easeInElastic'
  2. Observe how the animation overshoots at the beginning and snaps to its final position with no overshoot
  3. Adjust the animation to use easing: 'easeInElastic(2, 0.5)'
  4. Observe how the animation adds an overshoot to the end before arriving at its final position.

Expected behavior Only the size of the existing overshoot is increased.

Screenshots chrome_2022-02-28_11-46-58

Desktop (please complete the following information):