Skip to content

Transitions

Transitions can be defined for components that support animated switching such as Stepper or Task.

Transition object

Name Description
transition see list below
curveIn animation curve for entry, see list below for options
curveOut animation curve for entry, see list below for options
durationIn duration in miliseconds that the animation should last
durationOut duration in miliseconds; will default to in duration if not provided

Transitions

  1. none
  2. flipX
  3. flipY
  4. scale
  5. swapRight
  6. swapLeft
  7. slide
  8. fade

Curves

  1. linear
  2. decelerate
  3. fastLinearToSlowEaseIn
  4. ease
  5. easeIn
  6. easeInToLinear
  7. easeInSine
  8. easeInQuad
  9. easeInCubic
  10. easeInQuart
  11. easeInQuint
  12. easeInExpo
  13. easeInCirc
  14. easeInBack
  15. linearToEaseOut
  16. easeOutSine
  17. easeOutQuad
  18. easeOutCubic
  19. easeOutQuart
  20. easeOutQuint
  21. easeOutExpo
  22. easeOutCirc
  23. easeOutBack
  24. easeInOut
  25. easeInOutSine
  26. easeInOutQuad
  27. easeInOutCubic
  28. easeInOutCubicEmphasized
  29. easeInOutQuart
  30. easeInOutQuint
  31. easeInOutExpo
  32. easeInOutCirc
  33. easeInOutBack
  34. fastOutSlowIn
  35. slowMiddle
  36. bounceIn
  37. bounceOut
  38. bounceInOut
  39. elasticIn
  40. elasticOut
  41. elasticInOut