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.
<script type="text/javascript" src="https://github.com/akucharik/oculo/raw/master/oculo/dist/TweenMax.min.js"></script>
<script type="text/javascript" src="https://github.com/akucharik/oculo/raw/master/oculo/dist/Draggable.min.js"></script>
<script type="text/javascript" src="https://github.com/akucharik/oculo/raw/master/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 });