[BUG] Scroll animation (parallax) & offset since motion 11.11.14

[msev]

Hello,

Up until now I've been using the motionone library (10.18.0) for various animations, including parallax:

document.querySelectorAll('[data-animation="parallax"]').forEach(($item) => {
  const value = getComputedStyle($item).getPropertyValue('--animation-parallax-value') || '20%';

  scroll(
    animate($item,
      {
        transform: [`translate3d(0, -${value}, 0)`, `translate3d(0, ${value}, 0)`]
      }
    ),
    {
      target: $item,
      offset: ['-100% 100vh', '100% -100vh']
    }
  );
});

But since I updated to version 11.11.14, I have the impression that the way the offset are calculated has changed, and that the parallax starts earlier than before.

I notice that when I log the offset values, they're no longer the same as with motionone (10.18.0).

Even more surprisingly, when using animate or animateMini, the offset values are not the same either.

Is there an adjustment to be made on my side? Is this normal behavior?

Thank you in advance for your help

[mattgperry]

Can you try adding ease: “linear” to the animation? I will fix this as a bug tho

[msev]

Hi @mattgperry,

Thanks for the suggestion, it does indeed fix the problem.

I realize that I had the same problem with another scroll animation, but this time with the opacity property. Adding ease linear also fixes the problem.

Will this be corrected on your side or do I need to keep this setting on my side?

Thanks for your time.

[mattgperry]

I would set this for now on your side but for me this will be the first bug I fix

On Wed, Nov 13, 2024 at 1:40 PM Maxime @.***> wrote:

Hi @mattgperry https://github.com/mattgperry,

Thanks for the suggestion, it does indeed fix the problem.

I realize that I had the same problem with another scroll animation, but this time with the opacity property. Adding ease linear also fixes the problem.

Will this be corrected on your side or do I need to keep this setting on my side?

Thanks for your time.

— Reply to this email directly, view it on GitHub https://github.com/motiondivision/motion/issues/2868#issuecomment-2473506095, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB34WKX3NJ27NYIFIPIUXCL2ANCCFAVCNFSM6AAAAABRWGIQMGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINZTGUYDMMBZGU . You are receiving this because you were mentioned.Message ID: @.***>