## Feature Examples ### Enter Animation - description:

Make component appear using these four animation types:

  • Fade In - use it for sudden appearances or state changes.
  • Move In - use it to emphasize direction from which object appears. It supports 4 possible directions.
  • Expand - use it for objects that appear in between the content. It supports 4 possible directions.
  • ScaleUp - use it to explain that object appears from a certain point. It supports 9 possible directions.

    • To see all possible direction options please check API.

    - example: ```jsx () => { const [showFade, setShowFade] = React.useState(false) const [showMove, setShowMove] = React.useState(false) const [showExpand, setShowExpand] = React.useState(false) const [showScaleUp, setShowScaleUp] = React.useState(false) return ( fadeIn moveIn expand scaleUp ) } ``` ### Exit Animation - description:

    Make components disappear using these four animation types:

  • Fade Out - use it for appearances or state changes.
  • Move Out - use it to emphasize the direction to which object disappears. It supports 4 possible directions.
  • Collapse - use it for objects that disappear in between the content. It supports 4 possible directions.
  • ScaleDown - use it to explain that an object disappears to a certain point. It supports 9 possible directions.

    • To see all possible direction options please check API.

    - example: ```jsx () => { const [showFade, setShowFade] = React.useState(true); const [showMove, setShowMove] = React.useState(true); const [showCollapse, setShowCollapse] = React.useState(true); const [showScaleDown, setShowScaleDown] = React.useState(true); return ( fadeOut moveOut collapse scaleDown ); }; ``` ### Duration - description:

    Use it to determine how long animation plays. Choose form 6 following properties:

  • Fast01 - 100ms. Use for small objects such as Buttons or Toggles.
  • Fast02 - 150ms. Use for larger than small objects such as Tooltips or Section Helpers.
  • Medium01 - 200ms. Use for medium size objects like dropdowns or accordions.
  • Medium02 - 300ms. Use for greater than medium size objects like side panel or small modals.
  • Slow01 - 450ms. Use for larger objects like big modals or large collapsible content.
  • Slow02 - 600ms. Use for very large objects like page transitions.
    • - example: ```jsx () => { const [showMove, setShowMove] = React.useState(true) const renderTransition = (duration) => { return ( {duration} ) } return ( {renderTransition('fast01')} {renderTransition('fast02')} {renderTransition('medium01')} {renderTransition('medium02')} {renderTransition('slow01')} {renderTransition('slow02')} ) } ``` ### Easing - description:

    Use it to determine the velocity of the object's motion:

  • Enter Easing - used for objects that appear on the screen during the enter animation.
  • Exit Easing - used for objects that disappear from the screen during the exit animation.
  • Standard Easing - used for objects that stay present on the screen during enter or exit animations. For example toggle switch.
    • - example: ```jsx () => { const [showMove, setShowMove] = React.useState(true) const renderEasing = (easing) => ( {easing} ) return ( {renderEasing('enterEasing')} {renderEasing('exitEasing')} {renderEasing('standardEasing')} ) } ``` ### Delay - description:

    Use it to determine the time it takes for animation or next animation to start. There are three delay values:

  • Short - 100ms.
  • Medium - 150ms.
  • Long - 200ms.
    • - example: ```jsx () => { const [showMove, setShowMove] = React.useState(true) const renderTransition = (delay) => { return ( {delay} ) } return ( {renderTransition('short')} {renderTransition('medium')} {renderTransition('long')} ) } ``` ## Common Use Case Examples ### Animating list items - description: Use Transition component in cases when new elements appear or disappear from a screen, like in this case when dismissing list items. - example: ```jsx () => { const [child, setChild] = React.useState([]); const handleRemove = id => { setChild(previous => previous.filter(c => c.id !== id)); }; const handleAddChild = () => { const id = new Date().getTime(); const item = { id, node: ( { handleRemove(id); }} options={[ { value: Order {child.length}, align: 'left' }, { value: 2 minutes ago, align: 'center' }, { value: ( handleRemove(id), }} /> ), }, ]} /> ), }; setChild([item, ...child]); }; return ( } onClick={() => handleAddChild()} > Add new order } /> {child.map(c => c.node)} ); }; ```