# Layout properties binding

> Learn how layout properties binding in PandaSuite enables dynamic interactions and animations by linking element properties with data sources. Explore use cases like interactive movement, gestures, and more.

https://docs.pandasuite.com/essentials/layout/layout-properties-binding/

**The layout property data binding allows you to dynamically link properties such as position, size, or rotation of an element to a data source. This opens the door to dynamic interactions and smooth animations within your applications.**

Here are some use cases where using the [binding](https://docs.pandasuite.com/account/account/delete-your-pandasuite-account/) of layout properties is beneficial:

- **Interactive movement:** Move an object based on the position of a tap or a physical object.
- **Animation and gestures:** Create smooth rotations based on sliders, gestures, or external data.
- **Physical interfaces:** Synchronize [TUIO data](https://docs.pandasuite.com/essentials/components/app-to-app/) with your elements for immersive touch interactions.

## Position Binding

You can use several types of data for the **Position**:

- **Point:** A classic representation of a point with coordinates `(x, y)`.
- **Norm Point:** A normalized representation of the point between `0` and `1`.

### Using Norm Point

For the Norm Point, a value `(0.5, 0.5)` places the element at the center of its parent. The origin point is always the center of the element, simplifying dynamic centering and alignment.

Using a Norm Point, it is possible to bind the position of an element to a user event, such as a tap. In the example below, the goal is to display an animation at the location where the user taps, knowing they can tap anywhere on the screen.

When the user taps on the Interactive Area, the tap position is exposed as two Norm Points (**From the selected event** in the data window):

- **Global:** Relative to the entire screen.
- **Parent:** Relative to the element's parent.

[Image: Tap on an Interactive Area of a bee screen: the data window shows Trigger › Gesture, with the Global and Parent Norm Points framed]

This position can be stored in a variable in the [Datastore](https://docs.pandasuite.com/essentials/data/datastore/), which will then be bound to the **Position** property of an object, such as a Lottie animation.

[Image: Lottie animation selected in PandaSuite Studio, with its Position property bound to the Touch Norm Point data]

Thanks to this data, the animation dynamically moves based on the tap's position.

[Template: On Tap Animation](https://pandasuite.com/dashboard/use-template/R_QquogB5IBMJWwg1ppX)

## Rotation Binding

The **Rotation** property can be bound to a variable containing an angle in **degrees**. The behavior is based on the origin point, which is always the center of the element, just like for the position. This ensures rotations are intuitive and predictable.

Key points:

- **Angle in degrees:** You can dynamically bind an angle to adjust an element's rotation.
- **Center origin point:** The rotation is centered around the element, enabling smooth animations and visual interactions.
- **Multi-turn values:** Values such as `450°` or `-720°` are supported. The visual orientation wraps every `360°`, but the full value is preserved for binding and animation.

When a user drags a slider, the rotation angle can be dynamically updated based on the slider's value.

A rotation at `0°` corresponds to the initial orientation, and a positive or negative rotation adjusts the element around its center.

## Extended Possibilities: App-to-App and TUIO

With the [App-to-App](https://docs.pandasuite.com/essentials/components/app-to-app/) component, it is possible to link data from an external device or a local server to interact with your elements.

Devices compatible with TUIO provide data, such as the position of a physical object, in the form of Norm Points.

By combining this data with bound properties (e.g., position or rotation), you can synchronize a virtual object with its physical counterpart in real time.