Infamous Canvas

by Joe Pea

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script>
<script src="https://cdn.rawgit.com/trusktr/infamous/v17.0.4/global.js"></script>
<motor-scene>
  <motor-node class="box"
    sizeMode="absolute, absolute, absolute"
    absoluteSize="200, 200, 0"
    proportionalSize="0, 0, 0"
    position="0, 0, -1000"
    rotation="0, 0, 0"
    opacity="0.5"
    align="0.5, -1, 0"
    mountPoint="0.5, -1, 0"
    >
    
    <h1>Hello 3D!</h1>
    
  </motor-node>
</motor-scene>

CSS

html, body, .scene {
    width: 100%; height: 100%;
    margin: 0; padding: 0;
}

* { box-sizing: border-box; }

.box {
  border: 1px solid red;
}

JavaScript

var Motor = infamous.core.Motor
var Tween = TWEEN.Tween
var Easing = TWEEN.Easing

var box = document.querySelector('.box')

var alignTween = new Tween(box.align)
	.to({y:0.5}, 2500)
	.easing(Easing.Bounce.Out)
	.start()
  
var positionTween = new Tween(box.position)
	.to({z:0}, 2500)
	.easing(Easing.Quadratic.Out)
	.start()

Motor.addRenderTask(function(timestamp) {
  alignTween.update(timestamp)
  positionTween.update(timestamp)
  
  box.rotation.y -= 0.33
  box.mountPoint = box.align
})