Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Deprecated
Animation

{"base64":"  ","img":{"width":73,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","length":927,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-animation-0.png"}}

Warning

The Animation block has been deprecated. Despite this, support for it is still granted.

Animation is a VTEX Component that display some animations in their children props. This Component can be imported and used by any VTEX App.

Usage

You should follow the usage instruction in the main README.

To import it into your code:


_10
import { Animation } from 'vtex.store-components'

You can use it in your code like a React component with the jsx tag: <Animation />.


_10
<Animation>
_10
This is an animated text! \o/
_10
</Animation>

Configuration

Prop nameTypeDescription
classNameStringThe className to set the animation
childrenNode!Component children that will be displayed inside of the animation
typeStringType of the animation, it can be 'drawerLeft', 'drawerRight', 'drawerTop' or 'drawerBottom'
isActiveBooleanActive the animation
durationnumberThe animation duration in seconds, the default value is 0.4 second.
transfernumberThe active animation deslocation in percentage, the default value is 110%.
transferEnternumberThe not active animation deslocation in percentage, the default value is 0%.

Styles API

You should follow the Styles API instruction in the main README.

CSS Namespaces

For now this component does not have any css namespaces.

Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page