Chakra-UI

I♥️Components

Transitions

|

Chakra Docs

|

⦾ Chakra UI provides a set of transition components that can be used to create smooth and visually appealing transitions in your React applications. These components include Fade, ScaleFade, Slide, SlideFade, and Collapse.

These transition components are are built on top of the popular animation library called Framer Motion, which is a powerful and flexible animation library for React that allows you to create smooth and interactive animations with ease. It provides a wide range of features and options for creating animations, including transitions, keyframes, and gesture-based animations.

Each transition component corresponds to a specific animation effect and provides a set of props that can be used to control and customize the animation behavior. These props are derived from the props available in Framer Motion, allowing you to take advantage of the rich animation capabilities provided.

  • Fade: creates a smooth fading effect when transitioning a component in or out of view by gradually changes the opacity of the component. The in prop is used to control the visibility of the component, and the unmountOnExit prop can be used to unmount the component when it is not visible.
  • ScaleFade: combines scaling and fading effects during the transition. It allows you to control the initial scale of the component using the initialScale prop and smoothly fades in or out based on the in prop.
  • Slide: enables you to create sliding animations for components by specifying the direction of the slide animation using the direction prop, which can be set to 'bottom', 'top', 'left', or 'right'. The component smoothly slides in or out based on the in prop.
  • SlideFade: combines sliding and fading effects. It smoothly slides the component in or out based on the in prop and applies a fade effect simultaneously. You can customize the slide animation's offset in the y-axis direction using the offsetY prop.
  • Collapse: used to create expandable and collapsible regions of content with a smooth animation. It allows you to toggle the visibility of the content using the in prop, providing a seamless expand and collapse effect. The animateOpacity prop enables animating the opacity during the transition.

These components can be imported as follows:

Examples

Fade

⦾ The Fade component is used to create a fading effect when transitioning a component in or out of view.
  • transition: A prop that allows you to customize the animation transition. It accepts an object with properties like duration, delay, ease, and times. These properties control the duration, delay, easing function, and keyframes for the animation.
  • in: A boolean value that controls the visibility of the component. It triggers the enter or exit states of the animation.
  • unmountOnExit: If set to true, the component will unmount when in={false} and the animation is completed.

The following are two examples using Fade. The first is the default behavior. The second shows a custom fade using the transition prop.

<Fade in={isOpen}>
duration: 0.95

Code

ScaleFade

⦾ The ScaleFade component allows you to create a scaling and fading effect during the transition.
  • transition: Similar to the Fade transition, the ScaleFade transition accepts the transition prop to control the animation transition.
  • in:A boolean value that controls the visibility of the component. It triggers the enter or exit states of the animation.
  • initialScale: The initial scale of the element. It is a number between 0 and 1. The default value is 0.95. This is the scaled size from which the element will transition from when it enters.
  • reverse: If set to true, the element will transition back to the exit state when it leaves. The default value is true.
  • unmountOnExit: If set to true, the component will unmount when in={false} and the animation is completed.

Below is an example of the default settings on ScaleFade as well as an example where you can choose the initialScale size to see the differences between values.

<ScaleFade in={isOpen}>
<ScaleFade initialScale=0.7>

Slide

⦾ The Slide component enables you to create sliding transitions for your components.
  • transition: The Slide transition also accepts the transition prop to customize the animation transition.
  • direction: The direction from which the component slides in. It can be set to 'right', 'left', 'top', or 'bottom'. The default value is 'right'.
  • in: A boolean value that controls the visibility of the component. It triggers the enter or exit states of the animation.
  • unmountOnExit: If set to true, the component will unmount when in={false} and the animation is completed.

In the example below, you can try out the different directions to see how the component behaves under each circumstance.

SlideFade

⦾ The SlideFade component combines both sliding and fading effects during the transition.
  • SlideFade: The SlideFade transition component allows you to customize the animation transition using the transition prop.
  • in: A boolean value that controls the visibility of the component. It triggers the enter or exit states of the animation.
  • offsetX: The offset on the horizontal or x-axis. It can be a string or number. The default value is 0.
  • offsetY: The offset on the vertical or y-axis. It can be a string or number. The default value is 8.
  • reverse: If set to true, the element will be transitioned back to the offset when it leaves. Otherwise, it will only fade out. The default value is true.
  • unmountOnExit: If set to true, the component will unmount when in= and the animation is completed.

In the following examples, you can see the default behavior of the SlideFade component. Then you can experiment with the different values for the offsetX and offsetY properties from -200px to 200px for both X and Y. You can also experiment with the duration settings to see how the animation varies.

SlideFade

offsetX=

offsetY=

Duration=

SlideFade

Collapse

⦾ The Collapse component is used to create expandable/collapsible regions of content with a smooth animation.

  • animateOpacity: If set to true, the opacity of the content will be animated during the transition. The default value is true.
  • startingHeight: The Collapse transition component accepts the startingHeight prop, which sets the initial height of the collapsed content. This prop is useful when you want the collapsed content to have a specific height instead of collapsing to a height of zero.
  • endingHeight: The height you want the content to be in its expanded state. It can be a string or number. The default value is "auto".
  • in: A boolean value that controls the visibility of the component. It triggers the enter or exit states of the animation.
  • unmountOnExit: If set to true, the component will unmount when in= and the animation is completed.

In the following example, you can experiment with the different values for startingHeight, endingHeight, and duration with the Collapse component.

Collapse

startingHeight=

endingHeight=

Duration:

Did you know?

Creative Idea No. 1

Bouncing Ball: In this example, we create a bouncing ball animation using the ScaleFade component. When the user clicks on the ball (button), it will shrink and fade out, and then quickly expand and fade back in, creating a bouncing effect. The way this works is when the user clicks on the ball/button, the handleBounce function is triggered. It sets the isBouncing state to true, which triggers the ScaleFade component. (The emoji animation gets a little Framer Motion deeper into Framer Motion.) Check out the code for more details. Animations like this provide visual feedback to users when they interact with certain elements, such as buttons or other interactive components.

Code

Creative Idea No. 2

Image Slideshow Transitions: In this example, we create a slideshow that smoothly crossfades between images using the Fade and useState components. Cycle through the images below to see the transition effect.

Code

Creative Idea No. 3

Card Transition: In this example, we have a button that toggles the visibility of a card. When the button is clicked, the SlideFade component is used to smoothly reveal or hide the card with a sliding animation. The card component itself is a simple Box with some text content, demonstrating how you can apply transitions to any element within your UI.
A Creative Journey
Imagine embarking on a journey through a vast spectrum of colors, discovering unique palettes that convey moods, themes, and narratives. From serene pastels that evoke tranquility to bold and energetic combinations that ignite passion, each palette tells a story of its own.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.