Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .container {
        width: 300px;
        height: 300px;
        background-color: #eee;
        margin: 20px auto;
        position: relative;
    }
    
    #block {
        position: absolute;
        left: 125px;
        bottom: 200px;
        width: 50px;
        height: 50px;
        line-height: 100px;
        text-align: center;
        border-radius: 10px;
        background-color: #ebc;
        background-size: 100% 100%;
        will-change: transform;
    }
    </style>
</head>
​
<body>
    <div class='container'>
        <div id="block"></div>
    </div>
    <script type="text/javascript">
    (function() {
        var script = document.createElement('script');
        script.onload = function() {
            var stats = new Stats();
            stats.domElement.style.cssText = 'position:fixed;left:10px;top:10px;z-index:10000';
            document.body.appendChild(stats.domElement);
​
            function Animator(duration, progress, easing) {
                this.duration = duration;
                this.progress = progress;
                this.easing = easing || function(p) {
                    return p
                };
            }
​
            Animator.prototype = {
                start: function(finished) {
                    var startTime = Date.now();
                    var duration = this.duration,
                        self = this;
​
                    requestAnimationFrame(function step() {
                        stats.update();
                        var p = (Date.now() - startTime) / duration;
                        var next = true;
​
                        if (p < 1.0) {
                            self.progress(self.easing(p), p);
                        } else {
                            if (typeof finished === 'function') {
                                next = finished() === false;
                            } else {
                                next = finished === false;
                            }
​
                            if (!next) {
                                self.progress(self.easing(1.0), 1.0);
                            } else {
                                startTime += duration;
                                self.progress(self.easing(p), p);
                            }
                        }
​
                        if (next) requestAnimationFrame(step);
                    });
                }
            };
​
            function AnimationQueue(animators) {
                this.animators = animators || [];
            }
​
            AnimationQueue.prototype = {
                status: 'ready',
                append: function() {
                    var args = [].slice.call(arguments);
                    this.animators.push.apply(this.animators, args);
                },
                flush: function() {
                    if (this.animators.length) {
                        var self = this;
​
                        function play() {
                            var animator = self.animators.shift();
​
                            if (animator instanceof Animator) {
                                animator.start(function() {
                                    if (self.animators.length) {
                                        play();
                                    }
                                });
                            } else {
                                animator.apply(self);
                                if (self.animators.length) {
                                    play();
                                }
                            }
                        }
                        play();
                    }
                }
            };
​
​
            var block = document.getElementById('block');
            var a1 = new Animator(500, function(p) {
                var ty = 200 * p * p;
                block.style.transform = 'translateY(' + ty + 'px) rotate(' + 360 * p + 'deg)';
            });
​
            var a2 = new Animator(500, function(p) {
                var ty = 200 - 200 * p * (2 - p);
                block.style.transform = 'translateY(' + ty + 'px) rotate(' + 360 * p + 'deg)';
            });
​
            var animators = new AnimationQueue();
            animators.append(a1, a2, function() {
                this.append(a1, a2, arguments.callee);
            });
            animators.flush();
​
        };
        script.src = 'http://rawgit.com/mrdoob/stats.js/master/build/stats.min.js';
        document.head.appendChild(script);
    })()
    </script>
</body>
​
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x