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
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)
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
Source: Popmotion/popmotion