JSFiddle - React, Tailwind, and code Playground

by dirkk0

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenMax.min.js"></script>
<script src="http://threejs.org/examples/js/libs/tween.min.js"></script>
<script src="http://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="http://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>

JavaScript

init();
    animate();

    function init() {

        var output = document.createElement( 'div' );
        output.style.cssText = 'position: absolute; left: 50px; top: 10px; font-size: 10px';
        document.body.appendChild( output );

        var tween = new TWEEN.Tween( { x: 50, y: 0 } )
            .to( { x: 400 }, 2000 )
            .easing( TWEEN.Easing.Elastic.InOut )
            .onUpdate( function () {

                output.innerHTML = 'x == ' + Math.round( this.x );
                output.style.left = this.x + 'px';

            } )
            .start();

    }

    function animate() {

        requestAnimationFrame( animate ); // js/RequestAnimationFrame.js needs to be included too.
        TWEEN.update();

    }