Animation Plugin

gluestack-style offers a plugin that supports animation properties, utilizing animation libraries such as @legendapp/motion, framer-motion, and moti. We will use @legendapp/motion in this example.

Installation:

# using npm

npm install @gluestack-style/animation-resolver

# using yarn

yarn add @gluestack-style/animation-resolver

How to use:

Initialization of the plugin:

You can initialize the Animation plugin by creating a new instance of the AnimationResolver class and pass it inside config. The AnimationResolver takes an optional styledUtils object that maps the styled utils object. Here's an example:

By default, the plugin aliases @legendapp/motion properties.

import { AnimationResolver } from "@gluestack-style/animation-resolver"

export const config = {
  aliases: {},
  tokens: {},
  plugins: [new AnimationResolver()],
}

In this example, we are creating a new instance of the AnimationResolver class, passing an object with the 'aliases' property as an argument. The aliases object maps the aliases :initial, :animate, and :exit to their corresponding animation props.

Example of creating a styled component:

Once the plugin is initialized, you can use the styled function to create styled components with animation props. Here's an example:

import { AnimatedView } from "@gluestack-style/animation-resolver"

const Box = styled(AnimatedView, {
  ":initial": { opacity: 0 },
  ":animate": { opacity: 1 },
  ":exit": { opacity: 0 },
})

The final internal styled object that will be resolved is:

styledObject = {
  'props': {
    initial: {
      opacity: 0,
    },
    animate: {
      opacity: 1,
    },
    exit: {
      opacity: 0,
    },
    }
  },
};

Exit animation:

The Animation plugin provides a AnimatePresence component. Internally, it utilizes AnimatePresence from activated animation driver to check if any component is removed from the React tree, aiding in exit animations. Here's an example:

We used the styled component below to create the above example:

const StyledMotionImage = styled(AnimatedImage, {
  ":animate": {
    zIndex: 1,
    x: 0,
    opacity: 1,
  },
})

In this example, we're using the AnimatePresence, provided by the animation resolver, to wrap the Box component. Internally, it uses AnimatePresence from activated animation driver.