Spring and decay animations in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the spring animation function from React Native Reanimated.

React Native

import { [1] } from 'react-native-reanimated';

Drag options to blanks, or click blank then click option'

Adecay

Bspring

Ctiming

DfadeIn

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'decay' which is for decay animations, not spring.

Choosing 'timing' which is for timing animations.

The spring function is used to create spring animations in React Native Reanimated.

2fill in blank

medium

Complete the code to start a spring animation on the shared value 'progress'.

React Native

progress.value = [1]({ toValue: 1 });

Drag options to blanks, or click blank then click option'

AwithDelay

Btiming

Cdecay

Dspring

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'decay' which causes a decay animation instead.

Using 'timing' which is a different animation type.

The spring function animates the value with spring physics towards the toValue.

3fill in blank

hard

Fix the error in the decay animation code by completing the missing function call.

React Native

progress.value = [1]({ velocity: 1000 });

Drag options to blanks, or click blank then click option'

Adecay

BwithTiming

Cspring

Dtiming

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'spring' which requires a toValue instead of velocity.

Using 'timing' which is for timed animations.

The decay function animates the value with a decay effect based on velocity.

4fill in blank

hard

Fill both blanks to create a spring animation with a custom damping and stiffness.

React Native

progress.value = spring({ toValue: 1, damping: [1], stiffness: [2] });

Drag options to blanks, or click blank then click option'

A15

B100

C50

D200

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping damping and stiffness values.

Using very high damping causing no bounce.

Damping controls how bouncy the spring is; stiffness controls how stiff the spring feels. Common values are damping=15 and stiffness=50 for smooth animation.

5fill in blank

hard

Fill all three blanks to create a decay animation with a velocity, clamp the value between 0 and 100.

React Native

progress.value = decay({ velocity: [1], clamp: [[2], [3]] });

Drag options to blanks, or click blank then click option'

A500

B0

C100

D1000

Attempts:

3 left

💡 Hint

Common Mistakes

Using velocity too low causing slow animation.

Swapping clamp min and max values.

The decay animation starts with a velocity of 1000 and clamps the value between 0 and 100 to prevent it from going out of bounds.