# Synchronize HTML5 animations

> Learn how to synchronize your HTML5 animation with other components in PandaSuite, using our step-by-step guide and ready-made module for efficient integration.

https://docs.pandasuite.com/tutorials/how-to/synchronize-html5-animations/

No problem to insert HTML5 animations (Greensock, Edge Animate ...) you simply upload the .zip file in the HTML component and presto! they appear! :-)

If you want to go further and synchronize your animation with another component, it is necessary to indicate directly in the construction of HTML5 folder.

To make life easier, we have prepared an HTML5 animation model ready for synchronization: feel free to download and use in your application.

Overview of synchronized animation with motion sensor:

[Video: the tablet tilts and a small red character moves back and forth along a curve, synced with the motion sensor]

In this article, we explain how to create this synchronization in the studio and for those who want to synchronize their own HTML5 animation, we will also detail how it was built in the HTML5.

[DOWNLOAD THE MODULE](https://github.com/pandasuite/html5-samples/releases/download/v1.0.16/synchro.zip)

## 1. Synchronize This HTML5 Animation

In the Studio, insert a **Web** component where you want to display this animation. In its properties, keep the **Offline** type, open **Source** and choose the .zip file of the animation (the **+** of the list imports it).

To preview the animation, double-click the component to enter it. However it will remain static as long as you didn't create any interaction.

Insert a **Motion Sensor** component and keep its horizontal axis in its properties. Insert a **Synchronization** component. In its properties, click **Add** and pick the Motion Sensor (**Interactive Selection**), then keep **Horizontal axis** on. Click **Add** again and pick the Web component.

We find the property "*Synchronize animation progression*" specifically created in the HTML module. Your animation is ready :-)

[Image: Tilt synchronization selected: its Components list holds the synchro.zip Web component, synced, and the Motion sensor on its horizontal axis]

## 2. Create Your Own HTML5 Synchronization (Advanced)

In this section we explain step-by-step how this module was created in order for you to create your own synchronization with an HTML5 animation.

This animation is made of an *index.html* file, a CSS file, an image and javascript files.

[Image: Module contents: css, img and js folders, plus the index.html, panda-bridge-3.0.3.min.js and pandasuite.json files]

### The *pandasuite.json* file

In the file *pandasuite.json* we described synchronization in the category synchronization. We chose its name in the studio (*Synchronize animated progression*) and its French translation (*Synchronize progression animation*).

[Image: Excerpt from pandasuite.json: the animationProgress synchronization, named Synchronize animation progression, with its fr_FR translation]

That's how you create a synchronization property.

[Image: In the synchronization, the Animation Web component (synchro.zip) offers the “Synchronize animation progression” property, turned on]

### The file PandaBridge

The PandaBridge makes it easy to communicate between the HTML component and the application, in terms of transmission and reception. You must insert this file in your .zip file.

There are no changes required.

### The methods of the PandaBridge class

In the *index.html* file we must include the connection with the panda-bridge and synchronization properties previously reported.

Here are the different additions:

- Insert the script code in the header

[Image: Script tag loading panda-bridge-3.0.3.min.js, to insert in the header of index.html]

- Setting up synchronization

The *init* method allows the initialization, it is what will allow to perform the functionality of PandaBridge.

The *synchronize* method is based on a specific function in which the arguments are the percentage of synchronization.

[Image: JavaScript code: PandaBridge.init, then PandaBridge.synchronize on animationProgress, which sets the TweenLite progress as a percentage]

Once implemented this feature, you can create a synchronization with the sensor of your choice! It's up to you to implement it in your HTML5 animation and have fun :-)