Control the Grid
Create a grid of responsive shapes and control how they enter and exit the page.
Set up the page
Begin by lengthening the page to ensure the ability to scroll. Select Page>Page Properties and set the Min Height to a larger number. For this example the page length is 4000px.
Select the Main widget from the Library panel and drag it to the top of your page. This widget must be on every page using Scroll Effects only once. Placing the Main widget on the Masters page will ensure each page will have it included.
Create the content
For this example we will be creating a grid of shapes that will scroll onto the page from different places. Be sure to leave an area before the shapes so there will be enough page to scroll before the effects. For this example, the grid sits at 1130px on the y-axis.
Naming the items
Name the items within the Tooltip panel by clicking the Hyperlinks tab. The naming values are case sensitive and should not have any special characters or spaces. This name will be utilized throughout the widget components so it is important to make them unique to this effect. Each square will receive its own effect so each is named according to its placement: topleft, topright, bottomleft, botttomright.
Placing the Handles
From the Library panel, drag and drop the Top handle onto the page. To have the squares arrange themselves toward the center of the page leave space between the top of the grid and the Top handle. For this example there is about 300px between the handle and the content.
The Finish Handle should not be able to be within the browser at the same time as the Start Handle, so it will be placed about 500px below the grid. Type in the name of the square into the Finish Handles title area.
Now that we have one effect for the top left square we can easily duplicate this effect by Shift+Option+clicking and dragging the handles. Repeat this step for each square to have a Start handle.
Open the Start Handle Option Panel of each copy and assign it to a square using the exact name of the relative square. Repeat the steps to create an effect for each square. Below is the Option panels for each square.