search

oblador / react-native-animatable

Standard set of easy to use animations and declarative transitions for React Native
MIT License
9.84k stars 702 forks source link

Easy way to disable animations #129

Open almostintuitive opened 7 years ago

almostintuitive commented 7 years ago

Hi!

We're using this library heavily, and we love it!:)

There an issue we've faced lately with react native itself: on older devices, rendering itself is slow. Even without animations, we're dropping frames. But adding appearance animations adds on top of that, and during fast interactions, creates a noticable lag, where react native is just executing the queued up animations.

Currently, I haven't found an easy way to disable animations within the animatable components, but it'd be great if we didn't have to write either an additional wrapper around all animatable components.

A simple animation = "none" would suffice :).

I'm happy to contribute this to the repo - but before forking & submitting a pull request, wanted to ask if it'll be accepted or not.

Thanks!

Mark

oblador commented 7 years ago

Hey, passing something falsy as animation should effectively disable the animation, but if you're having perf issues I'd look into the useNativeDriver prop.

bilalsyed001 commented 6 years ago

Try animation={undefined}

smerkousdavid commented 6 years ago

I think @itchingpixels has a great idea as some of the more complicated animations - on multiple view levels - can be produce a ton of frame lose on old phones, some properties don't support native driver and it can't be the solution to all custom animations. Nevertheless, having a way to disable animations or enable them would be amazing as I'm planning on having an option to disable them completely for people who want a faster and more functional experience. For the animation promises it could just check if not enabled and return the end with an 'incomplete' or 'disabled' string, and the View wrappers could simply not start the animation. It would be nice to have an easy way to disable animations.

cjpete commented 5 years ago

This is relevant for use cases other than just performance. Sometimes you want to use the same list but only animate under certain scenarios. I.e. don't animate items in on first load, or when changing sort order, but do when moving items around in a list.

I think this is currently only possible when using the 'imperative' style API, and creating a custom animation controller, though it does seem to short-circuit the animation if the code in createAnimatableComponent is changed to allow for a duration of 0.