Adding the element on your page

You need to create Animation Blocks which will allow you to add elements as any other drag and drop area in Weebly.

Next we will be going over the available settings

---

1. Animation Type

Choose your desired animation type from a selection of 28 different types
To view all the animations available for your use, please visit:
ANIMATIONS

---

2. Animation Duration

With the animation duration option you can set how long the animation should take place,
​pick an integer set in milliseconds,  meaning: 1000ms is 1 second.

---

3. Animation Delay

Animation delay lets you add a delay to animation, this value is also in milliseconds, so when set to 1000, it will take 1 second before the animation will take place. On the demo page, you can see in the section containing 9 music related images, we dropped 3 images in one row, and increased the value of the second row and third row with 200ms, so that row 2 has 200ms of delay and row 3 400ms of delay.

---

4. Animation Offset

Animation take place when an element gets in the viewport, meaning that when a user scrolls down the animation takes place when the element enters the viewport. So when the top of an element, that has animations set, reaches the bottom of the screen, the animation will be triggered. Changing this value in pixels, will allow you to increment the spacing(offset) between the bottom of the viewport and the top of the element. 
The higher the value, the more a user has to scroll before the animation takes place.
Please remind to not set this value too high, while you might be working on a huge desktop screen, other viewers might be checking your site from a smaller device.

VISUALIZATION
​

---

5. Hide Element Before Animation

There are only two values that can be set:
show or hide
This option by default is set to show, because for elements out of the viewport (when loading the page), this behavior will be automatically set, but for elements visible in the viewport you can set the element to hidden, so it will smoothly show the animation only and when ready to be applied.
Remember to only set this for top elements of your page as for other elements this value is obsolete.

---

Each animation area will have a magic stick icon at the right top, by clicking this you will toggle a blue border around the animation area, which will allow you to more easily see which elements are grouped together in a certain animation block.