Create a Grid

 

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.

 

 

 

Create the Effects

Open the Start Option Panel and input the effects for the top left square. First, type in the name of the square exactly as it appears within the Tooltip panel.

For this example, each square slides in from one edge of the browser and then returns once the Finish Handle enters. To make this effect, start with the Before the Start Handle section (A). The Horizontal speed will move to the left at .5 of the normal scroll speed or 50%. Input .5 to the Horizontal speed and keep the Vertical speed at 0 for no vertical scroll motion.

Once the square reaches its place within the outer square it should remain in place until it reaches the Finish handle. In section B, Between Two Handles, input 0 for the Horizontal and Vertical speed to keep the top left square still within the Start and Finish handle.

After the Finish Handle Enters from the bottom of the browser the top left square should return to the left of the browser. In section C, After Finish Handle Enters, input -.5 for the top left square to move to the left at .5 of normal scroll speed or 50%.

 

 

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.