-
Notifications
You must be signed in to change notification settings - Fork 663
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Popmotion: Animation duration stretched when using pixi.js Ticker as animation driver #929
Comments
I now that this is an old issue and it shouldn't be one to you at this time. But i took a look at your sandbox and played with it. I will leave here a comment for anyone who may stumble upon it later since this is still open. I am not sure what you meant by "stretched ", but your animation had a little bug which made the animation be inconsistent because the update callback is calculating the circle.x value using the whole window width. onUpdate: (current) => {
circle.x = current % window.innerWidth;
} This should be changed to the width of the pixi element instead. onUpdate: (current) => {
circle.x = current % app.renderer.view.clientWidth;
} By the way, i didn't know that nice trick with the modulo to achieve that type of animation. It is so logical for this type of situation, once one see it. This really shows how much animation i have made (or not) along the years 😎 Thanks for the tip. |
I came across this issue and took a look. Problem isn't related to So solution is: const tickerDriver: Driver = (update) => {
const tweakedUpdate = () => update(app.ticker.deltaMS)
return {
start: () => app.ticker.add(tweakedUpdate),
stop: () => app.ticker.remove(tweakedUpdate)
}
} Don't know why this is still open, pretty sure author found solution a while ago. |
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()
timerExpected 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?
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)but both use
performance.now
i believeThe text was updated successfully, but these errors were encountered: