experiment_3

by blueshell

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineMax.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/KineticPlugin.min.js"></script>
<div id="canvas"></div>
<input type="button" value="fallAndSlide" id="fallAndSlide">
<input type="button" value="changeFallDuration" id="changeFallDuration">

JavaScript

'use strict';

var stage = new Kinetic.Stage({
    container: document.getElementById("canvas"),
    width: 400,
    height: 400 
});

var layer = new Kinetic.Layer();

var circle = new Kinetic.Circle({
    x: 100,
    y: 100,
    fill: "black",
    radius: 12
});

layer.add(circle);
stage.add(layer);

var fall = TweenMax.to(circle, 2, { kinetic: { y: "+=80" }});
var slide = TweenMax.to(circle, 2, { kinetic: { x: "+=80" }});
var fallAndSlide = new TimelineMax({ paused: true });
fallAndSlide.add(fall);
fallAndSlide.add(slide);

document.getElementById("fallAndSlide").onclick = function() { fallAndSlide.play(); };
document.getElementById("changeFallDuration").onclick = function() { fall.totalDuration(0.5); };