Here are a few tips and tricks to get you started with our Inverter stack.

Use only the Inverter stack on the page!

The Inverter stack should really be the only content stack on the page (exceptions below) as this stack provides the functionality to allow all of the content that is added to it to be displayed horizontally across the screen.


A notable exception to this would be the addition of a fixed navigation bar as this will not be affected by the horizontal scrolling. You'll see a fixed navigation bar used in all of the examples.

Adding content outside of the Inverter stack can be done but when you start scrolling it will scroll as normal whereas everything in the Inverter stack will scroll horizontally. You can achieve some quite nice results with this if you don't add too much content and start your Inverter blocks further to the right. You'll see a couple of examples of this approach in the example projects.

Positioning your blocks

You need to manually set the start point for each content block that you add. To help you with this you can easily see the start and end points of each block already added. You can use these numbers to guide where you should make the starting point of each new block.

Adding content

Do not add too much content to any Inverter block. Whatever does not fit (height-wise) onto the screen will be clipped from the bottom. This will obviously be most likely on a mobile device. Depending on the nature of your content it might be beneficial to hide some of the stacks that you add for people using mobile devices (you'd generally achieve this by simply using the regular 'hide this stack' setting for each stack).