experiment_3

by blueshell

HTML

<div id="canvas"></div>
<input type="button" value="test1" id="test1">
<input type="button" value="test1_reverse" id="test1_reverse">

JavaScript

'use strict';

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

var layer = new Kinetic.Layer();

var text = new Kinetic.Text({
    text: 'A lot of fun text to read while developing a strange cat in pajamas with a popsticle.',
    fontSize: 30,
    fontFamily: 'Calibri',
    fill: 'green'
});
text.setOffset([text.getWidth(), 0 ]);
text.setX(400 + text.getWidth());

layer.add(text);
stage.add(layer);

var slide = TweenMax.to(text, 10, { kinetic: { x: 400 }, paused: true, ease: Linear.easeNone });

document.getElementById("test1").onclick = function() { slide.play(); };
document.getElementById("test1_reverse").onclick = function() { slide.reverse(); };