Transition

Animate presence of component with predefined animations

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

Both components are based on Transition component from react-transition-group library.

Transition and GroupedTransition components allow you to work with enter/exit animations. Components come with premade animations and option to create your own based on CSS properties.

Premade transitions

Mantine includes several premade transitions:

To use one of them set transition property to one of these values:

import React from 'react';
import { Transition } from '@mantine/core';

function YourModal({ opened }) {
  return (
    <Transition mounted={opened} transition="fade" duration={400} timingFunction="ease">
      {(styles) => <div style={styles}>Your modal</div>}
    </Transition>
  );
}

Custom transitions

You can create your own transition. Transition is an object with 4 properties:

in – styles for mounted state
out – styles for unmounted state
common (optional) – styles for both mounted and unmounted states
transitionProperty – properties which participate in transition

import React, { useState } from 'react';
import { Transition, Paper, Button } from '@mantine/core';
import { useClickOutside } from '@mantine/hooks';

const scaleY = {
  in: { opacity: 1, transform: 'scaleY(1)' },
  out: { opacity: 0, transform: 'scaleY(0)' },
  common: { transformOrigin: 'top' },
  transitionProperty: 'transform, opacity',
};

function Demo() {
  const [opened, setOpened] = useState(false);
  const clickOutsideRef = useClickOutside(() => setOpened(false));

  return (
    <div
      style={{
        maxWidth: 200,
        position: 'relative',
        display: 'flex',
        justifyContent: 'center',
        margin: 'auto',
      }}
    >
      <Button onClick={() => setOpened(true)}>Open dropdown</Button>
      <Transition mounted={opened} transition={scaleY} duration={200} timingFunction="ease">
        {(styles) => (
          <Paper
            shadow="md"
            style={{ ...styles, position: 'absolute', top: 0, left: 0, right: 0, height: 120 }}
            elementRef={clickOutsideRef}
          >
            Dropdown
          </Paper>
        )}
      </Transition>
    </div>
  );
}

Use GroupedTransition if you need to animate presence of more that one element at the same time but with different transitions. For example, in Modal component overlay and modal body animated differently: modal body slides from the top and overlay fades.

import React from 'react';
import { GroupedTransition } from '@mantine/core';

function Demo({ opened }) {
  const duration = 500;

  return (
    <GroupedTransition
      mounted={opened}
      transitions={{
        modal: { duration, transition: 'slide-down' },
        overlay: { duration: duration / 2, transition: 'fade', timingFunction: 'ease' },
      }}
    >
      {(styles) => (
        <div>
          <div style={styles.modal}>Modal body</div>
          <div style={styles.overlay}>Modal overlay</div>
        </div>
      )}
    </GroupedTransition>
  );
}

TypeScript

You can import MantineTransition type to use in your components, it includes all premade transitions names and transition object:

import { MantineTransition, Transition } from '@mantine/core';

function Demo({ transition = 'skew-up' }: { transition: MantineTransition }) {
  return <Transition transition={transition} /* other props */ />;
}