Tonic UI
Getting StartedColor ModeColor StyleVersionsContributing
THEME
BordersBreakpointsColorsOutlinesPositionsSpacingSizesShadowsTypography
BUILDING BLOCKS
BoxControlBox
UTILITIES

Transition

Import

Usage

Scale transition

EDITABLE EXAMPLE

Slide transition

EDITABLE EXAMPLE

Slide in transition

EDITABLE EXAMPLE

Props

Scale

NameTypeDefaultDescription
inbooleanToggle visibility with a transition effect.
childrenfunctionA single function-child that receives the styles and renders components.
durationnumber150The duration of the transition.
initialScalenumber0.97The initial zoom level.

Slide

NameTypeDefaultDescription
inbooleanToggle visibility with a transition effect.
childrenfunctionA single function-child that receives the styles and renders components.
durationnumber250The duration of the transition.
fromstringOne of: 'bottom', 'top', 'left', 'right'
finalHeightstring'auto'
finalWidthstring

SlideIn

NameTypeDefaultDescription
inbooleanToggle visibility with a transition effect.
childrenfunctionA single function-child that receives the styles and renders components.
durationnumber150The duration of the transition.
offsetstring'10px'The slide-in offset in pixel.