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.