# Animating Property

Reality Hub’s approach to animating is unique but easy to understand.&#x20;

This section will be animating **Reality Parent Transform Actor**'s <mark style="color:red;">**`Relative Rotation`**</mark> and <mark style="color:red;">**`Relative Location`**</mark> properties, located under <mark style="color:blue;">**`Transform`**</mark> property group.

* Add <mark style="color:yellow;">**`UserTrack`**</mark>, <mark style="color:yellow;">**`UE5`**</mark> nodes to the canvas.
* Connect the <mark style="color:green;">**`Track`**</mark> output pin of the <mark style="color:yellow;">**`UserTrack`**</mark> node into <mark style="color:green;">**`RealityCamera0.Track`**</mark> input pin of the <mark style="color:yellow;">**`UE5`**</mark> node.
* Create a <mark style="color:yellow;">**`Sink`**</mark> node on <mark style="color:green;">**`RealityCamera0.Track`**</mark> output pin of the <mark style="color:yellow;">**`UE5`**</mark> node. See [Sink Pin](https://zerodensitydocumentation.gitbook.io/docs/reality-5.3-sp2/reality-5.3-sp2/user-guide/nodegraph-actions/nodegraph/sink-pin).
* Activate the APM on <mark style="color:green;">**`RealityCamera0.Scene`**</mark>.

<div align="left"><figure><img src="https://3158411086-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4U3Lg7WjDb4Pjs4QC0E2%2Fuploads%2F65GB7QvNCM7q8iG6laCH%2Fimage.png?alt=media&#x26;token=c09c521e-00f7-4a6a-97f6-00719d2c7279" alt=""><figcaption><p>Example Node Network</p></figcaption></figure></div>

Your GRaph should look like the image above.

Now:

* Activate the Actions module; then click on the <img src="https://3158411086-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4U3Lg7WjDb4Pjs4QC0E2%2Fuploads%2FABoAdleurFIj5ueNWLdm%2Fimage.png?alt=media&#x26;token=51d486ef-c0af-456d-8441-6595b2c30a62" alt="" data-size="original"> button.

<div align="left"><figure><img src="https://3158411086-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4U3Lg7WjDb4Pjs4QC0E2%2Fuploads%2FE6TmAvUvPIykPwTrd98K%2Fimage.png?alt=media&#x26;token=7e6f424e-85fb-447d-8b03-1d367ab199a1" alt=""><figcaption><p><mark style="color:blue;"><strong><code>Transform</code></strong></mark> Property Group</p></figcaption></figure></div>

* Select the <mark style="color:yellow;">**`UE5`**</mark> Node, go to [Node Details Panel](https://zerodensitydocumentation.gitbook.io/docs/reality-5.3-sp2/reality-5.3-sp2/user-guide/nodegraph-actions/nodegraph/node-details-panel), expand the UE5, Reality Actor and Reality Parent Transform Actor folders, as illustrated above.&#x20;

<div align="left"><figure><img src="https://3158411086-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4U3Lg7WjDb4Pjs4QC0E2%2Fuploads%2Fi2e9Twf4DwZNg5vozJav%2Fimage.png?alt=media&#x26;token=ded825af-223e-4273-b4e2-825484ba775c" alt=""><figcaption><p>Adding Various Properties to Action Timeline</p></figcaption></figure></div>

* Go to <mark style="color:red;">**`Relative Location`**</mark> property, click on the Add Timeline button (![](https://3158411086-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4U3Lg7WjDb4Pjs4QC0E2%2Fuploads%2FtzyOYXB7giFv9M9UV3aY%2Fimage.png?alt=media\&token=8e00bb02-3228-4151-aca9-cace8aa8fc78)) in the [Node Property Toolset](https://zerodensitydocumentation.gitbook.io/docs/reality-5.3-sp2/reality-5.3-sp2/user-guide/nodegraph-actions/nodegraph/node-details-panel/node-property-toolset).
* Do the same for <mark style="color:red;">**`Relative Rotation`**</mark> property.

As the above image illustrates that <mark style="color:red;">**`Relative Location`**</mark> and <mark style="color:red;">**`Relative Rotation`**</mark> properties are now subject to the Actions module and are ready to be animated.

Now:&#x20;

<div align="left"><figure><img src="https://3158411086-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4U3Lg7WjDb4Pjs4QC0E2%2Fuploads%2F5n2ZJ34hEaWFEnDfK4wo%2Fimage.png?alt=media&#x26;token=0d921f63-7718-4dd3-a833-ee6f441d9148" alt=""><figcaption><p>Property Animation Circle</p></figcaption></figure></div>

When you hover your mouse over Relative Location, the **Node Property Menu Circle** turns white; this indicates that the property/function can be triggered/animated.

* Right click on the **Node Property Menu Circle** of <mark style="color:red;">**`Relative Location`**</mark> and select the **Add Keyframe**, as shown in the image above.
* Repeat the same process for the <mark style="color:red;">**`Relative Rotation`**</mark>.

<div align="left"><figure><img src="https://3158411086-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4U3Lg7WjDb4Pjs4QC0E2%2Fuploads%2F4eHpedaZdmac6P8HiIOF%2Fimage.png?alt=media&#x26;token=c69dee74-42d9-4494-83ff-57c90bcc1e54" alt=""><figcaption><p>Time Ruler</p></figcaption></figure></div>

* Scrub the Playhead to the second 2.
* Change the <mark style="color:red;">**`Relative Location`**</mark> and <mark style="color:red;">**`Relative Rotation`**</mark> property values similar to the one illustrated above. &#x20;
* Right click on the <mark style="color:red;">**`Relative Location`**</mark> and add the second keyframe. Repeat the process for the <mark style="color:red;">**`Relative Rotation`**</mark> property.&#x20;

{% hint style="info" %}
Make sure that you deselect the keyframe before adding another one to a different property.
{% endhint %}

<div align="left"><figure><img src="https://3158411086-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4U3Lg7WjDb4Pjs4QC0E2%2Fuploads%2FYKTKXqC9IVZfGCyxFf96%2Fimage.png?alt=media&#x26;token=938a2723-5843-40f9-83b9-87d7ec5e8130" alt=""><figcaption><p>Changin Interpolation</p></figcaption></figure></div>

* Select the second keyframe of <mark style="color:red;">**`Relative Location`**</mark>, change its interpolation type from **Jump** to **EaseOut**. Repeat the same process for the <mark style="color:red;">**`Relative Rotation`**</mark> property.

<div align="left"><figure><img src="https://3158411086-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4U3Lg7WjDb4Pjs4QC0E2%2Fuploads%2F3yivbozzOlIKHdYj0qcg%2Fimage.png?alt=media&#x26;token=d85c1fc0-272a-48b5-a373-1d1dcb9df47b" alt=""><figcaption><p>Finalizing Action Animation</p></figcaption></figure></div>

As the above image shows now our animations are completed.&#x20;

* Click on the **Action Play** button.
