search

maisano / react-router-transition

painless transitions built for react-router, powered by react-motion
http://maisano.github.io/react-router-transition/
MIT License
2.59k stars 139 forks source link

Very first transition is a bit buggy, after that it's smooth #103

Open michaelcukier opened 5 years ago

michaelcukier commented 5 years ago

Hi,

First of all, thanks for this component, it really solves a complicated problem in the easiest way possible.

I'm having a very small issue, but I'm kind of a perfectionist so it bothers me a little.

Basically, I have 5 routes, they have <NavLink />s to navigate between them, and on the very first page load, when I go to another route the animate transition starts, but it's a little bit jagged. After the very first route transition animation, the 'jag' disappears and it becomes super-smooth, like I want.

Is there a way to solve this problem?

Thanks!

maisano commented 5 years ago

hi @michaelcukier–thanks for the feedback/reaching out. it's hard to say what is causing jank during the initial render, though if i had to guess it likely has something to do with resource contention when your app is initially getting started.

all i can really suggest is that you profile your app and look for any bottlenecks–it might be worth trying to defer the initial render, or perhaps unset the runOnMount if you had previously set this to true. JS-bound animations are often difficult to keep performant.