Guidelines to use the Animator app
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
2. Animation Duration
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.
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.