Skip to main content

Animation Support

Pearl UI leverages the power of Moti and Reanimated to provide robust animation support. This allows for seamless addition of animations to components using style props and Moti props.

Understanding Moti and Reanimated#

Pearl UI integrates the power of Moti and Reanimated to deliver a smooth and efficient animation experience. These libraries are renowned for their superior performance and user-friendly approach to crafting animations in React Native.

Moti, a high-performance, customizable, and versatile library, simplifies the process of creating complex animations in React Native. It offers a straightforward and intuitive syntax that makes animation creation a breeze. To explore Moti and its extensive features, we recommend diving into the official Moti documentation.

Reanimated, on the other hand, is a low-level abstraction designed for building intricate animations in a more declarative manner. It provides a direct and flexible approach to managing animations in React Native, giving you more control over your animations. For a deeper understanding of Reanimated and its capabilities, we suggest checking out the official Reanimated documentation.

Implementing Animations with Pearl UI#

Pearl UI, with the help of Moti, provides a flexible and efficient way to implement animations in your React Native applications. Here are some examples demonstrating the implementation of various animations such as size, color, and opacity transitions.

FadeInUp Animation Example#

This example demonstrates a fade-in-up animation where the component starts with an opacity of 0 and a slight translation along the Y-axis, and then animates to an opacity of 1 and a Y translation of 0.

import React from "react";import { ThemeProvider, Screen, Box } from "pearl-ui";
const App = () => {  return (    <ThemeProvider initialColorMode="light">      <Screen>        <Box          h={50}          w="100%"          borderRadius="m"          bgColor="primary.500"          from={{ opacity: 0, translateY: 10 }}          animate={{ opacity: 1, translateY: 0 }}          transition={{ type: "spring", duration: 200 }}        />      </Screen>    </ThemeProvider>  );};
export default App;

ScaleIn Animation Example#

This example shows a scale-in animation where the component starts from a scale of 0 and animates to a scale of 1.

import React from "react";import { ThemeProvider, Screen, Box } from "pearl-ui";
const App = () => {  return (    <ThemeProvider initialColorMode="light">      <Screen>        <Box          h={50}          w="100%"          borderRadius="m"          bgColor="primary.500"          from={{ scale: 0 }}          animate={{ scale: 1 }}          transition={{ type: "spring", duration: 200 }}        />      </Screen>    </ThemeProvider>  );};
export default App;

Color Transition Animation Example#

This example illustrates a color transition animation where the component changes its background color from 'primary.500' to 'secondary.500'.

import React from "react";import { ThemeProvider, Screen, Box } from "pearl-ui";
const App = () => {  return (    <ThemeProvider initialColorMode="light">      <Screen>        <Box          h={50}          w="100%"          borderRadius="m"          from={{ bgColor: "primary.500" }}          animate={{ bgColor: "secondary.500" }}          transition={{ type: "timing", duration: 200 }}        />      </Screen>    </ThemeProvider>  );};
export default App;

These examples demonstrate the flexibility and power of Pearl UI's animation support. You can create complex animations by combining different animation properties and transition types.

Animating Components Based on State#

This section provides an example of how to animate a component based on its state using the useFocusedState hook. The component's background color changes depending on the focused state of an input field. It's important to note that the useFocusedState hook must be used within the ThemeProvider context.

import React, { useState } from "react";import {  ThemeProvider,  Screen,  Box,  Input,  useFocusedState,  boxStyleFunctions,} from "pearl-ui";
const FocusedBox = ({ isFocused, ...props }) => {  // The useFocusedState hook is used to manage the focused state and styles  const { propsWithFocusedStyles } = useFocusedState(    props, // Dynamic styles that change based on the focused state    boxStyleFunctions,    "basic",    true, // Enable animation support when transforming the props    isFocused  );
  return (    <Box      h={50}      w="100%"      borderRadius="m"      {...propsWithFocusedStyles} // Apply the dynamic styles      transition={{ type: "timing", duration: 200 }} // Animate the transition    />  );};
const App = () => {  // Initialize the isFocused state  const [isFocused, setIsFocused] = useState(false);
  // Render the component  return (    <ThemeProvider initialColorMode="light">      <Screen>        <FocusedBox          isFocused={isFocused}          bgColor="primary.500"          _focused={{ bgColor: "secondary.500" }}        />        <Input          onFocus={() => setIsFocused(true)} // Update the focused state when the input field is in focus          onBlur={() => setIsFocused(false)} // Update the focused state when the input field loses focus        />      </Screen>    </ThemeProvider>  );};

This example showcases the use of the useFocusedState hook to dynamically alter the style of a component based on the focused state of an input field. This allows for more interactive and responsive UI elements.

Animation Variants#

Pearl UI provides a powerful way to create and manage animations using the useAnimationState function. This function allows you to define animation states and apply them to your components, creating dynamic and engaging user interfaces.

Here are some common animations provided in Pearl UI:

Fade-In Animation#

The Fade-In animation gradually increases the opacity of an element from 0 to 1, causing it to slowly appear over time. This is useful for highlighting new elements or creating smooth transitions when elements enter the screen.

import { useFade } from "pearl-ui";
const fadeInAnimationState = useFade();
return <Box w={30} h={100} bgColor="pink" state={fadeInAnimationState} />;

Scale Fade Animation#

The Scale Fade animation combines scaling and fading effects. The element starts at half its original size and completely transparent, then scales up to its full size while becoming fully opaque. This creates a dynamic entrance effect.

import { useScaleFade } from "pearl-ui";
const scaleFadeAnimationState = useScaleFade();
return <Box w={30} h={100} bgColor="pink" state={scaleFadeAnimationState} />;

Slide Animation#

The Slide animation moves an element from off-screen to its final position on the screen, creating a sense of motion and progress. This is useful for sequentially revealing elements.

import { useSlide } from "pearl-ui";
const slideAnimationState = useSlide();
return <Box w={30} h={100} bgColor="pink" state={slideAnimationState} />;

Slide Fade Animation#

The Slide Fade animation combines sliding and fading effects. The element starts off-screen and completely transparent, then moves to its final position on the screen while becoming fully opaque. This creates a dynamic and engaging entrance effect.

import { useSlideFade } from "pearl-ui";
const slideFadeAnimationState = useSlideFade();
return <Box w={30} h={100} bgColor="pink" state={slideFadeAnimationState} />;