Get started

1. Add Oculo and its dependencies to the page.

After you download Oculo, add the necessary files to the page.

<script type="text/javascript" src="scripts/TweenMax.min.js"></script>
<!-- Draggable.min.js is only needed if you want to enable "dragToMove" on the camera -->
<script type="text/javascript" src="scripts/Draggable.min.js"></script>
<script type="text/javascript" src="scripts/oculo.min.js"></script>

2. Set up your HTML

Create HTML elements that correspond to your camera and scene.

<div id="camera"></div>
<div id="scene" style="width: 800px; height: 400px; background-color: gray;">
    <div>My first scene...</div>
</div>

3. Activate your camera

Activate your camera by creating an instance with the desired options, adding and setting the scene, and rendering it.

var camera = new Oculo.Camera({
    view: '#camera',
    width: 500,
    height: 250,
    dragToMove: true,
    wheelToZoom: true
}).addScene('scene1', '#scene');

camera.setScene('scene1');
camera.render();

// You can also create a scene like this:
camera.addScene('scene2', new Oculo.Scene('#scene2', 800, 400));

4. Animate your camera

To see your new camera in action, call one of the animation methods.

camera.zoomTo(2, 1, { ease: Power2.easeOut });

5. Create reusable animations

Creating reusable animations can make working with your camera a breeze. Simply add your animation to your camera and play it in the future. If you create an animation without a defined starting point, it will play from the current camera state.

camera.addAnimation('zoomInOut', {
  keyframes: [{ 
      zoom: 2, 
      duration: 1, 
      options: { 
          ease: Power2.easeIn 
      }
  }, {
      zoom: 1,
      duration: 1,
      options: {
          ease: Power2.easeOut
      }
  }]
});

//Play your animation in the future
camera.play('zoomInOut');

If you want an animation to consistently play from a defined starting point, just set the first keyframe's duration to 0.

camera.addAnimation('zoomIn', {
  keyframes: [{ 
      zoom: 1, 
      duration: 0,
  }, {
      zoom: 2,
      duration: 1,
      options: {
          ease: Power2.easeOut
      }
  }]
});