Frame your scene with Composition

Positioning elements within a scene while keeping your site responsive can be quite a challenge. The Composition feature is designed to make that process a bit easier.

Getting started with Composition

The easiest way to add Composition to your scene is by adding the pushin-composition class to a containing element that wraps all your pushin-layers.

The following is an example of the pushin-composition class in action:

<div class="pushin" data-pushin-mode="continuous">
  <div class="pushin-scene">
    <div class="pushin-composition">
      <div class="pushin-layer" data-pushin-speed="18">
        <img src="cactus.svg" style="width: 8%; bottom:46%; left:30%;">
      </div>
      <div class="pushin-layer">
        <img src="monster.svg" style="width: 10%; bottom:47%; right:40%">
      </div>
    </div>
  </div>
</div>

In the above example, you can see that the distance between the cactus and the monster will remain the same no matter how your resize your screen.

How does it work?

When positioning elements inside of a responsive container, you'll find that resizing the screen will change their position. The elements will drift around your scene, and it's nearly impossible to keep the same composition because the ratio of the width to the height of your frame is changing.

The Composition feature locks the aspect ratio of this frame so that when resizing the window, your elements don't drift around. This will allow you to more easily compose a scene while still building for responsive design.

By default, Composition comes with a 1:2 aspect ratio. This is the recommended aspect ratio to ensure that when you're viewing your scene on a mobile phone, you do not see it cropped on the top and bottom.

When should I use Composition?

You don't always need to use Composition, if you are not necessarily worried about elements drifting a little between devices, if you are using relative positioning, or if all your items are center screen.

If you are trying to compose a scene of multiple elements that should be positioned in a specific way, you should most definitely use Composition.

Customization

You can change the aspect ratio of your composition by using an HTML attribute or the JavaScript API.

Using HTML attributes

<div class="pushin-composition" data-pushin-ratio="16,9">
  <!-- Use a 16:9 composition -->
</div>

Using JavaScript API

// Option 1: Global function
pushInStart({
  composition: {
    ratio: [16, 9],
  }
});

// Option 2: Class constructor
const pushIn = new PushIn(
  document.querySelector('.pushin'),
  {
    composition:{
      ratio: [16, 9],
    }
  }
);
pushIn.start();

Tips and Tricks

There are a few tricks which have proven helpful when building complex scenes:

1. When working with graphics, build the entire composition in the aspect ratio you want it to be, and export the layers separately.
2. SVG Graphics work best, since you will be scaling them quite a lot.
3. For precise positioning, try using position: absolute; and use percentages to position your elements (rather than pixels). This will help your scene scale with the device size.