# Transitions

Transitions allow you to transition components in and out of view within your dashboard using various animations. You can take advantage of interactive cmdlets like `Set-UDElement` to change the transition state and cause an element to move in.

In the following example, we have a card that transitions in via a Fade. Clicking the switch the toggle the card in and out.

```
New-UDTransition -Id 'test' -Content {
    New-UDCard -Text "Hey"
} -In -Fade -Timeout 1000

New-UDSwitch -OnChange {
    Set-UDElement -Id 'test' -Properties @{
        in = $EventData -eq 'True'
    }
} -Checked $true
```

The resulting effect looks like this.

![Transition a card](https://2374445323-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6jY7sXTmhiAIMGYw_m%2F-MT3qfEHd_aIy_ofHCa6%2F-MT3rgQcwrJeeaHhQnqe%2Ftransition.gif?alt=media\&token=688dfeb9-eba7-4581-9eb0-f67144c0306d)

## Collapse

The collapse transition will collapse a section in and out. You can specify a collapse height to only collapse a portion of the section.

```
New-UDTransition -Id 'test' -Content {
    New-UDCard -Text "Hey"
} -In -Collapse -CollapseHeight 100 -Timeout 1000

New-UDSwitch -OnChange {
    Set-UDElement -Id 'test' -Properties @{
        in = $EventData -eq 'True'
    }
} -Checked $true
```

![Collapse Transition](https://2374445323-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6jY7sXTmhiAIMGYw_m%2F-MT3rvIyrAz0Q9Me6ki_%2F-MT3tODnYkR7SEY788Nn%2Fcollapse.gif?alt=media\&token=894c4f74-8b36-43ad-93e6-3b632f422585)

## Fade

A fade transition fades a component in and out as seen in the previous example. You can configure the timeout value to specify the number of seconds it takes to complete the transition.

```
New-UDTransition -Id 'test' -Content {
    New-UDCard -Text "Hey"
} -In -Fade -Timeout 1000

New-UDSwitch -OnChange {
    Set-UDElement -Id 'test' -Properties @{
        in = $EventData -eq 'True'
    }
} -Checked $true
```

## Slide

The slide transition moves a component into position. You can determine the position of the slide by specifying the `-SlideDirection` parameter.

```
New-UDTransition -Id 'test' -Content {
    New-UDCard -Text "Hey"
} -In -Slide -SlideDirection 'left' -Timeout 1000

New-UDSwitch -OnChange {
    Set-UDElement -Id 'test' -Properties @{
        in = $EventData -eq 'True'
    }
} -Checked $true
```

![Slide Transition](https://2374445323-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6jY7sXTmhiAIMGYw_m%2F-MT3rvIyrAz0Q9Me6ki_%2F-MT3sJ-lKySdxmtCk5TF%2Fslide.gif?alt=media\&token=df48a758-7b89-41b3-854d-f005f3e50818)

## Grow

The grow transition will fade and grow a component into place.

```
New-UDTransition -Id 'test' -Content {
    New-UDCard -Text "Hey"
} -In -Grow -Timeout 1000

New-UDSwitch -OnChange {
    Set-UDElement -Id 'test' -Properties @{
        in = $EventData -eq 'True'
    }
} -Checked $true
```

![Grow Transition](https://2374445323-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6jY7sXTmhiAIMGYw_m%2F-MT3rvIyrAz0Q9Me6ki_%2F-MT3sfgijwf_aRaJg3Do%2Fgrow.gif?alt=media\&token=0bc5f006-e414-442f-b77a-ab7ea85b896a)

## Zoom

The zoom transition will zoom a component into place.

```
New-UDTransition -Id 'test' -Content {
    New-UDCard -Text "Hey"
} -In -Zoom -Timeout 1000

New-UDSwitch -OnChange {
    Set-UDElement -Id 'test' -Properties @{
        in = $EventData -eq 'True'
    }
} -Checked $true
```

![Zoom Transition](https://2374445323-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6jY7sXTmhiAIMGYw_m%2F-MT3tl5RdwN9cynDVH6Y%2F-MT3v3dvHAJCkwGWQXPm%2Fzoom.gif?alt=media\&token=ebb39602-4dd5-46fa-ae42-0f88ee8324d1)