Animations

Assign an animation to your view

By default, you can use the default bubble, pop, fade, or directly an object that defines your animation.
There are 3 ways to declare an animation for your view:

// Execute a specific animation at a specific moment
showMethod(...modalProps, { animation: "pop" });

// Execute a specific animation for a specific modal
<MyModalRoot config={{ MyModal: { animation: "fade" } }} />

// Execute a generalized specific animation for all modals
<MyModalRoot animation="bubble" />

tip

They are ordered based on their priority, meaning one method can overwrite another

How it works

The way the core animates the views is by detecting our modalRoot thanks to the data-modal-back-id property, the root is considered as "back" and its next element as "container". You can play with these two tags as much as you want. Normally with the back, you can create a fade effect or a simpler one to make the view "appear," and with the container, you can animate the content of the view.

Native API

All the animations in this library are built with the browser's native animation API, which means that if you want to extend or create your own animation, you'll have to do it with the props of this API.
Animate method
Web Animations API

Default animation

All the custom animations you declare will extend the "fade" animation by default, which is the following:

info

This is clarified in case you don't understand why your custom animation is shown with a certain "easing" or a certain time without explicitly declaring it.

Additionally, the extension is superficial, meaning that if you declare, for example, container.keyframes , it will be completely replaced by the new keyframes, they won't be combined. :::

Declare your own animation

Since custom animations are extensions of a default one, you don't need to declare all the props. You can simply modify some details, e.g.:

const myCustomAnim = {
  container: {
    keyframes: {
      transform: ["translateY(60%)", "translateY(0%)"],
    },
    config: { duration: 350 },
  },
};

You can also create more complex animations like the "pop" effect:

const myCustomPopAnim = {
  back: {
    keyframes: [{ opacity: 0 }, { opacity: 1 }],
    config: { duration: 200, fill: "forwards" },
  },
  container: {
    keyframes: {
      transform: ["translateY(60%) scale(0.8)", "translateY(0%) scale(1)"],
    },
    config: {
      duration: 250,
      fill: "forwards",
      reverse: false,
      easing: "cubic-bezier(.47,1.64,.41,.8)",
    },
  },
};

General animation considerations

Lifecycle

When the show method is executed, the animation starts running, and when the close method is called, the same animation is executed in reverse. This is done so that the view can be closed, even when its entry is being animated, and to avoid flickering or jumping. You can override this behavior by setting the config.reverse property to false. This will prevent the reverse animation from running when the modal is closed. It won't do anything. (Example: in pop, when the modal is closed, it won't go down)

const myCustomAnim = {
  container: {
    config: { reverse: false },
  },
};

Custom reverse animation

You can also define reverse as a function, which will return an animation configuration. The first argument of this function will be the element to animate, meaning you'll be able to create dynamic exit configurations. You can find an example of this in the Example Toast.

const ToastAnim = {
  back: {
    config: {
      reverse: (parentElement) => {
        Object.assign(parentElement.style, { overflow: "hidden" });

        parentElement.animate(
          {
            opacity: [1, 0],
          },
          { duration: 150, fill: "forwards" }
        );

        return {
          keyframes: {
            maxHeight: [`${parentElement?.offsetHeight}px`, "0px"],
            paddingTop: [`${parentElement.style.paddingTop}px`, "0px"],
          },
          config: { duration: 300, delay: 150 },
        };
      },
    },
  },
};