#929·popmotion

Popmotion: Animation duration stretched when using pixi.js Ticker as animation driver

Author: farhat-hCreated Dec 12, 2021Updated May 19, 2023

Describe the bug

Animation duration is stretched when using pixijs Ticker (update loop) as driver.

How to reproduce

Create a driver that adds the update method to the ticker on start and removes it to stop. The ticker will call the update method with delta time. The ticker also uses Performance.now() timer

typescript
const tickerDriver: Driver = (update) => {
  return {
    start: () => app.ticker.add(update),
    stop: () => app.ticker.remove(update)
  };
};

// usage
animate({
    ...options,
    driver: tickerDriver
  });

Expected behaviour

Duration is not stretched.

Link to CodePen example (or similar)

CodeSandbox: https://codesandbox.io/s/ecstatic-fog-6j7xg?file=/src/index.ts:485-630

Device information

In which environment are you reproducing the bug?

  • Device: [Desktop]
  • OS: [Windows 10]
  • Browser [Firefox, Chrome and Opera] (same problem on all of them)

Additional context

Permalink to Ticker update method

At first I thought it was a timer resolution issue because multiplying dt by 10 and passing it to update made it the issue go away (kinda)

typescript

const tweakedTickerDriver: Driver = (update) => {
  const updateAnim = (dt :number) => {
    update(dt * 10)
  }
  return {
    start: () => app.ticker.add(updateAnim),
    stop: () => app.ticker.remove(updateAnim)
  };
};

but both use performance.now i believe