Simple animations can be created using the transition property, duration, timing function, and delay utility USS classes. For more complex animations, use the transition library classes or define your own. The transition library classes are intended to be used with the TransitionUtils and LoopTransitionUtils utility classes.

Classes for transitions are named using the format: [transition]--[state].

Where state includes:

  • req - for the base requirement class that contains transition properties, duration, and timing function fields
  • rest - for the rest state of the element when it has completed it's entry animation
  • anim - for the exit animation state of the element when it has completed it's exit animation
  • hover - for the hover state of the element
  • left - an alternative of the --anim state. Used for exit state in the left direction when exit animations have multiple options
  • up - an alternative of the --anim state. Used for exit state in the up direction when exit animations have multiple options
  • right - an alternative of the --anim state. Used for exit state in the right direction when exit animations have multiple options
  • down - an alternative of the --anim state. Used for exit state in the down direction when exit animations have multiple options

All doddle transition variables are contained within doddle-configuration.tss, and can be modified. For more information please see Customization.

ClassContents
Gif showing a label in a looped grow animationGif showing a label in a looped grow animation with a small clockwise rotationGif showing a label in a looped grow animation with a small counterclockwise rotation
Gif showing a label with exit fade animationsGif showing a label with exit misc animations
Gif showing labels with a hover grow animationGif showing labels with a hover translate animationGif showing labels with a hover misc animation

Doddle USS provides helper methods in TransitionUtils and LoopTransitionUtilsfor entry/exit animations only. Hover transitions are simple always-on USS classes. These helpers allow you to easily apply transitions at runtime, or pre-define multiple instances of static UI content from ScriptableObjets with simple population scripts.

The TransitionUtils class has methods ApplyEnterTransition() and ApplyExitTransition()which expects a loop transition type enum below:

  • Fade = 0 - for the .fade--req, .fade--rest, and .fade--anim classes
  • FadeTranslateRight = 1 - for the .fade-translate--req, .fade-translate--rest, and .fade-translate--right classes
  • FadeTranslateLeft = 2 - for the .fade-translate--req, .fade-translate--rest, and .fade-translate--left classes
  • FadeTranslateDown = 3 - for the .fade-translate--req, .fade-translate--rest, and .fade-translate--down classes
  • FadeTranslateUp = 4 - for the .fade-translate--req, .fade-translate--rest, and .fade-translate--up classes
  • FadeTranslateBigRight = 5 - for the .fade-translate-big--req, .fade-translate-big--rest, and .fade-translate-big--right classes
  • FadeTranslateBigLeft = 6 - for the .fade-translate-big--req, .fade-translate-big--rest, and .fade-translate-big--left classes
  • FadeTranslateBigDown = 7 - for the .fade-translate-big--req, .fade-translate-big--rest, and .fade-translate-big--down classes
  • FadeTranslateBigUp = 8 - for the .fade-translate-big--req, .fade-translate-big--rest, and .fade-translate-big--up classes
  • FadeTranslateScaleRight = 9 - for the .fade-scale-translate--req, .fade-scale-translate--rest, and .fade-scale-translate--right classes
  • FadeTranslateScaleLeft = 10 - for the .fade-scale-translate--req, .fade-scale-translate--rest, and .fade-scale-translate--left classes
  • FadeTranslateScaleDown = 11 - for the .fade-scale-translate--req, .fade-scale-translate--rest, and .fade-scale-translate--down classes
  • FadeTranslateScaleUp = 12 - for the .fade-scale-translate--req, .fade-scale-translate--rest, and .fade-scale-translate--up classes

The LoopTransitionUtils class has method ApplyLoopTransition()which expects a loop transition type enum below:

  • Breathe = 0 - for the .breathe--req, .breathe--rest, and .breathe--anim classes
  • BreatheRotateCW = 1 - for the .breathe-rotate-cw--req, .breathe-rotate-cw--rest, and .breathe-rotate-cw--anim classes
  • BreatheRotateCCW = 2 - for the .breathe-rotate-ccw--req, .breathe-rotate-ccw--rest, and .breathe-rotate-ccw--anim classes
Transition type enum example showing scriptable objectGif showing UI fade/translate on entry, and exit

C#