Spring animations are "slow" to end

[wcandillon]

Thank you so much for making this great module. I started to build some video tutorial on how to use it:

• https://www.youtube.com/watch?v=vAtf1fENGDA
• https://www.youtube.com/watch?v=UbedXievYGI
• https://www.youtube.com/watch?v=8HYb6ixhLKQ

I've built a couple of animations using the runSpring function that we can find in the examples of the repo. You can find one here: https://snack.expo.io/@git/github.com/wcandillon/can-it-be-done-in-react-native:tinder-swiping (components/Profiles.js).
I have a condition on when the clock is stopped by the spring animation, this condition always evalutes much later (few seconds) after the animation is seemingly done. Is that a behavior that sound famillar or I would need to provide a smaller example?

[nstfkc]

Hey @wcandillon, idk its the convenient way but maybe you can try to put a condition which checks the clock value is lessThan something then you can call the function? Thanks a lot for those great videos btw.

[wcandillon]

@enestufekci Does that mean that even though we don't see the object animate anymore, it still does? (but so slightly that we cannot see it? 🤔).

[futuun]

@enestufekci Does that mean that even though we don't see the object animate anymore, it still does? (but so slightly that we cannot see it? 🤔).

Yes, and that’s quite common thing with spring based animations.
There are two properties (restSpeedThreshold & restDisplacementThreshold) that allow you to define when your spring should be considered at rest.
Check this for description of those two.

[wcandillon]

woah thank you so much 🙏🏻

…

On Tue 20 Nov 2018 at 09:44, Michał Mokijewski ***@***.***> wrote: @enestufekci <https://github.com/enesTufekci> Does that mean that even though we don't see the object animate anymore, it still does? (but so slightly that we cannot see it? 🤔). Yes, and that’s quite common thing with spring based animations. There are two properties (restSpeedThreshold & restDisplacementThreshold) that allow you to define when your spring should be considered at rest. Check this <https://facebook.github.io/react-native/docs/animated#spring> for description of those two. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#132 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AASr1tdGWGzgxjGHaaCbJ7bNWg4qukfQks5uw8EEgaJpZM4Yp25k> .

[JonnyBurger]

I found that because of this behavior, if you have many interactions and the users does them in rapid succession, it can cause some flickery / unwanted behavior.

For example if you have a modal-like functionality and use springs to make the animation to open / close the modal, and you trigger the close action before the open animation has finished, there can be some weird bugs.

I have tweaked my runSpring function that fixes the issues, although I might not fully understand why it's working.

function runSpring(clock, value, dest, otherClocks) {
	const state = {
		finished: new Value(0),
		position: new Value(0),
		time: new Value(0),
		velocity: new Value(0)
	};

	const config = {
		damping: 800,
		mass: 0.5,
		stiffness: 200,
		overshootClamping: true,
		restSpeedThreshold: 0.01,
		restDisplacementThreshold: 0.01,
		toValue: new Value(0)
	};

	return block([
		cond(
			or(...otherClocks.map(c => clockRunning(c))),
			otherClocks.map(c => stopClock(c))
		),
		cond(clockRunning(clock), 0, [
			set(state.finished, 0),
			set(state.time, 0),
			set(state.position, value),
			set(config.toValue, dest),
			startClock(clock)
		]),
		spring(clock, state, config),
		set(value, state.position),
		cond(state.finished, [
			stopClock(clock),
			set(state.finished, 0),
			set(value, dest)
		])
	]);
}

What it does differently is

(1) as soon as the spring is considered at rest, set the value to the destination value (so from 0 -> 1, as soon as it reaches 0.999 and is considered resting, it changes to 1)

(2) it allows to pass an array of clocks that should be stopped before the animation is started. you can use it like this:

const clock1 = new Clock()
const clock2 = new Clock()

runSpring(clock1, value, dest, [clock2])

This ensures that only 1 spring animation is run at the time which solves the above mentioned flickering problem for me.

[wcandillon]

@JonnyBurger Thank for sharing this solution. I will likely try it.

I noticed the exact same "issue" and fixed it outside the spring function. You can find an example at https://github.com/wcandillon/can-it-be-done-in-react-native/blob/master/tinder-swiping/components/Profiles.js.

I'm glad that we can share/improve these use cases together.

[hoffmannjan]

@JonnyBurger Thank for sharing this solution. I will likely try it.

I noticed the exact same "issue" and fixed it outside the spring function. You can find an example at https://github.com/wcandillon/can-it-be-done-in-react-native/blob/master/tinder-swiping/components/Profiles.js.

I'm glad that we can share/improve these use cases together.

Could you share which line fixes this issue?