Oculo is a simple and intuitive JavaScript 2D virtual camera for animating HTML within a frame.
Oculo requires GreenSock Animation Platform (GSAP), TweenMax to be specific, and uses it to handle tweening and rendering.
Check out Oculo's website to play with the demo, learn how to get started, and read the detailed documentation.
- Pan
- Zoom
- Rotate
- Shake
- Fade
- Drag to move
- Wheel to zoom
- Resize
- Bounds
- Play controls
- and more...
1. Download Oculo and add it and its dependencies to your page.
<script type="text/javascript" src="oculo/dist/TweenMax.min.js"></script>
<script type="text/javascript" src="oculo/dist/Draggable.min.js"></script>
<script type="text/javascript" src="oculo/dist/oculo.min.js"></script>
<div id="camera"></div>
<div id="scene" style="width: 800px; height: 400px; background-color: gray;">
<div>My first scene...</div>
</div>
var myCamera = new Oculo.Camera({
view: '#camera',
width: 500,
height: 250,
dragToMove: true,
wheelToZoom: true
}).addScene('scene1', '#scene').render();
Create reusable animations when your page initially loads:
myCamera.addAnimation('zoomInOut', {
keyframes: [{
duration: 2,
zoom: 2,
options: {
ease: Power2.easeIn
}
}, {
duration: 2,
zoom: 1,
options: {
ease: Power2.easeOut
}
}]
});
// Play your animation in the future: myCamera.play('zoomInOut');
Create on-the-fly animations when needed:
myCamera.zoomTo(2, 1, { ease: Power2.easeOut });