Animation Modifiers

To achieve dynamic animations with precise control, React UI Animate provides animation modifier functions. These modifiers allow customization of animation configurations when setting animation values using useAnimatedValue.

Applying withSpring modifier

The withSpring modifier facilitates spring-based animations on an animation value.

import { useAnimatedValue, withSpring } from 'react-ui-animate';

const animation = useAnimatedValue(0);

const animateRight = () => {
  animation.value = withSpring(100);
};

import React from 'react';

import { animate, useAnimatedValue, withSpring } from 'react-ui-animate';

const WithSpringModifier = () => {
  const translateX = useAnimatedValue(0);

  return (
    <div style={{ padding: 20 }}>
      <animate.div
        style={{
          height: 100,
          width: 100,
          background: '#f5533d',
          borderRadius: 4,
          translateX: translateX.value,
        }}
      />

      <button onClick={() => (translateX.value = withSpring(100))}>
        Animate Right
      </button>
      <button
        onClick={() =>
          (translateX.value = { toValue: 0, config: { immediate: true } })
        }
      >
        Reset
      </button>
    </div>
  );
};

export default WithSpringModifier;

Open Sandbox

You can further customize the spring configuration by passing options such as friction and tension.

animation.value = withSpring(100, { friction: 5 });

import React from 'react';

import { animate, useAnimatedValue, withSpring } from 'react-ui-animate';

const WithSpringModifierConfig = () => {
  const translateX = useAnimatedValue(0);

  return (
    <div style={{ padding: 20 }}>
      <animate.div
        style={{
          height: 100,
          width: 100,
          background: '#f5533d',
          borderRadius: 4,
          translateX: translateX.value,
        }}
      />

      <button
        onClick={() => (translateX.value = withSpring(100, { friction: 5 }))}
      >
        Animate Right
      </button>
      <button
        onClick={() =>
          (translateX.value = { toValue: 0, config: { immediate: true } })
        }
      >
        Reset
      </button>
    </div>
  );
};

export default WithSpringModifierConfig;

Open Sandbox

Applying withTiming modifier

The withTiming modifier enables timing-based animations on an animation value.

import { useAnimatedValue, withTiming } from 'react-ui-animate';

const animation = useAnimatedValue(0);

const animateRight = () => {
  animation.value = withTiming(100);
};

import React from 'react';

import { animate, useAnimatedValue, withTiming } from 'react-ui-animate';

const WithTimingModifier = () => {
  const translateX = useAnimatedValue(0);

  return (
    <div style={{ padding: 20 }}>
      <animate.div
        style={{
          height: 100,
          width: 100,
          background: '#3399ff',
          borderRadius: 4,
          translateX: translateX.value,
        }}
      />

      <button onClick={() => (translateX.value = withTiming(100))}>
        Animate Right
      </button>
      <button
        onClick={() =>
          (translateX.value = { toValue: 0, config: { immediate: true } })
        }
      >
        Reset
      </button>
    </div>
  );
};

export default WithTimingModifier;

Open Sandbox

You can adjust the timing configuration by passing options such as duration or easing.

animation.value = withTiming(100, { duration: 5000 });

import React from 'react';

import { animate, useAnimatedValue, withTiming } from 'react-ui-animate';

const WithTimingModifierConfig = () => {
  const translateX = useAnimatedValue(0);

  return (
    <div style={{ padding: 20 }}>
      <animate.div
        style={{
          height: 100,
          width: 100,
          background: '#3399ff',
          borderRadius: 4,
          translateX: translateX.value,
        }}
      />

      <button
        onClick={() => (translateX.value = withTiming(100, { duration: 5000 }))}
      >
        Animate Right
      </button>
      <button
        onClick={() =>
          (translateX.value = { toValue: 0, config: { immediate: true } })
        }
      >
        Reset
      </button>
    </div>
  );
};

export default WithTimingModifierConfig;

Open Sandbox

Applying withEase modifier

By default, the withEase modifier applies ease animation. It is automatically used if no other modifier function is specified.

import { useAnimatedValue, withEase } from 'react-ui-animate';

const animation = useAnimatedValue(0);

const animateRight = () => {
  animation.value = withEase(100); // Same as animation.value = 100
};

import React from 'react';

import { animate, useAnimatedValue } from 'react-ui-animate';

const WithEaseModifier = () => {
  const translateX = useAnimatedValue(0);

  return (
    <div style={{ padding: 20 }}>
      <animate.div
        style={{
          height: 100,
          width: 100,
          background: '#32a852',
          borderRadius: 4,
          translateX: translateX.value,
        }}
      />

      <button onClick={() => (translateX.value = 100)}>Animate Right</button>
      <button
        onClick={() =>
          (translateX.value = { toValue: 0, config: { immediate: true } })
        }
      >
        Reset
      </button>
    </div>
  );
};

export default WithEaseModifier;

Open Sandbox

Sequence Animation with withSequence modifier

To create sequential animations, use the withSequence modifier in combination with other modifiers like withTiming, withSpring, or withEase as an array.

import {
  useAnimatedValue,
  withSequence,
  withSpring,
  withTiming,
} from 'react-ui-animate';

const animation = useAnimatedValue(0);

const animateRight = () => {
  animation.value = withSequence([withSpring(50), withTiming(100)]);
};

In this example, animation.value first animates with a spring animation to 50, followed by a timing animation to 100.

import React from 'react';

import {
  animate,
  useAnimatedValue,
  withSequence,
  withSpring,
  withTiming,
} from 'react-ui-animate';

const WithSequenceModifier = () => {
  const translateX = useAnimatedValue(0);

  return (
    <div style={{ padding: 20 }}>
      <animate.div
        style={{
          height: 100,
          width: 100,
          background: '#f0ca6c',
          borderRadius: 4,
          translateX: translateX.value,
        }}
      />

      <button
        onClick={() => {
          translateX.value = withSequence([withSpring(50), withTiming(100)]);
        }}
      >
        Animate Right
      </button>
      <button
        onClick={() =>
          (translateX.value = { toValue: 0, config: { immediate: true } })
        }
      >
        Reset
      </button>
    </div>
  );
};

export default WithSequenceModifier;

Open Sandbox

Applying Pre-defined configs with withConfig modifier

To create sequential animations, use the withSequence modifier in combination with other modifiers like withTiming, withSpring, or withEase as an array.

To apply different pre-defined configs from AnimationConfigUtils like ELASTIC, BOUNCE, WOOBLE etc. we can use withConfig modifier.

import {
  useAnimatedValue,
  withConfig,
  AnimationConfigUtils,
} from 'react-ui-animate';

const animation = useAnimatedValue(0);

const animateLeft = () => {
  animation.value = withConfig(0, AnimationConfigUtils.WOOBLE);
};

const animateRight = () => {
  animation.value = withConfig(100, AnimationConfigUtils.BOUNCE);
};

In this example, animation.value is applied with BOUNCE animation when Animate Right button is clicked and WOOBLE animation when Animate Left button is clicked.

import React from 'react';

import {
  animate,
  AnimationConfigUtils,
  useAnimatedValue,
  withConfig,
} from 'react-ui-animate';

const WithConfigModifier = () => {
  const translateX = useAnimatedValue(0);

  return (
    <div style={{ padding: 20 }}>
      <animate.div
        style={{
          height: 100,
          width: 100,
          background: '#c370ff',
          borderRadius: 4,
          translateX: translateX.value,
        }}
      />

      <button
        onClick={() =>
          (translateX.value = withConfig(0, AnimationConfigUtils.WOOBLE))
        }
      >
        Animate Left
      </button>
      <button
        onClick={() => {
          translateX.value = withConfig(100, AnimationConfigUtils.BOUNCE);
        }}
      >
        Animate Right
      </button>
    </div>
  );
};

export default WithConfigModifier;

Open Sandbox

What's Next ?

In the next section, we will look at Handling Gestures.