# Animations

## Higher-order Animations

Higher-order animations are a powerful concept in Reanimated v2. Here is an example.

### `defineAnimation()`

This utility function enables you to declare custom animations that can be invoked on both the JS and UI thread.

```typescript
const withCustomAnimation = () => {
  "worklet";
  return defineAnimation(() => {
    "worklet";
    // ...animation code
    return {
      animation,
      start
    }
  });
}
```

### `animationParameter(animation)`

Access animations passed as parameters safely on both the UI and JS thread with the proper static types. Animations can receive other animations as parameter.

```typescript
export const withPause = (
  animationParam: AnimationParameter,
  paused: Animated.SharedValue<boolean>
) => {
  "worklet";
  return defineAnimation<PausableAnimation>(() => {
    "worklet";
    // Access the animation passed as parameter safely at runtime
    // with the proper TypeScript types
    const nextAnimation = animationParameter(animationParam);
    // ...animation code
```

### `withPause()`

Make an animation pausable. The state of the animation (paused or not) is controlled by a boolean shared value.

```typescript
const progress = useSharedValue(0);
const paused = useSharedValue(false);
useEffect(() => {
  progress.value = withPause(withLoop(withTiming(1)), paused);
}, []);
```

### `withBouncing()`

Add a bouncing behavior to a physics-based animation. An animation is defined as being physics-based if it contains a velocity in its state.

```typescript
// will bounce if the animations hits the position 0 or 100
withBouncing(withDecay({ velocity }), 0, 100)
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wcandillon.gitbook.io/redash/animations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.