Animations

Utilities to help add simple reusable animations and reduce boilerplate code. For custom and complex animations look into the Angular animations doc.

Setup

Import individual animation utilities as needed into the component that will contain the elements you want to animate.

{{ animationTypescript }} Animations Docs
Rotate Animation

Use tdRotateAnimation to rotate any element based on a boolean state.

Demo 1:

Typescript:

{{ rotate180Typescript }}

HTML:

{{ rotate180Html }}

Demo 2:

Typescript:

{{ rotate45Typescript }}

HTML:

{{ rotate45Html }}

Parameter Options:

degreesStart?: number

Degrees of rotation that the dom object will end up in during the "false" state

degreesEnd?: number

Degrees of rotation that the dom object will end up in during the "true" state

duration?: number

Duration the animation will run in milliseconds. Defaults to 250 ms.

delay?: number

Delay before the animation will run in milliseconds. Defaults to 0 ms.

ease?: string

Animation accelerate and decelerate style. Defaults to ease-in.

Collapse Animation

Use tdCollapseAnimation to collapse any element based on a boolean state.

Demo 1:

Collapse card Collapse card with a click!

Typescript:

{{ collapseTypescript }}

HTML:

{{ collapseHtml }}

Parameter Options:

duration?: number

Duration the animation will run in milliseconds. Defaults to 150 ms.

delay?: number

Delay before the animation will run in milliseconds. Defaults to 0 ms.

easeOnClose?: string

Animation accelerates and decelerates when closing. Defaults to ease-in.

easeOnOpen?: string

Animation accelerates and decelerates when opening. Defaults to ease-out.

Fade in/out Animation

Use TdFadeInOutAnimation to fade in/out any element based on a boolean state.

Demo 1:

Fade Card Fade in or out with a click!

Typescript:

{{ fadeTypescript }}

HTML:

{{ fadeHtml }}

API:

anchor?: string

The anchor name is used to attach the animation to an arbitrary element in the template. Defaults to 'tdFadeInOut'.

duration?: number

Duration the animation will run in milliseconds. Defaults to 150 ms.

delay?: number

Delay before the animation will run in milliseconds. Defaults to 0 ms.

easeOnIn?: string

Animation accelerates and decelerates when fading in. Defaults to ease-in.

easeOnOut?: string

Animation accelerates and decelerates when fading out. Defaults to ease-out.

Attention Seekers Animation

Demos:

Typescript:

{{ attentionSeekersAnimationTypescript }}

HTML:

{{ attentionSeekersAnimationHtml }}

API:

duration?: number

Duration the animation will run in milliseconds. Defaults to 500 ms.

delay?: number

Delay before the animation will run in milliseconds. Defaults to 0 ms.

ease?: number

Animation accelerate and decelerate style. Defaults to ease-out.