I'm trying to understand how to use PixiJS with the GSAP library TweeMax. For that, I used to look some code into project using the two library, like this one : /

But, I've some trouble to understand why I can't scale. When I try to scale, my ball goes to the top left of my window [0, 0]. And When I specify scaleX and scaleY, there is nothing. In the both cases, my animation continue without any mistake...

Here is my code

var renderer,
    stage;

var init = function() {

    // We create the canvas element
    stage = new PIXI.Stage(0x202020);
    renderer = new PIXI.CanvasRenderer(800, 600, null, false, true);
    document.getElementById("loader").appendChild(renderer.view);

    $(window).resize(onResize);
    onResize();

    requestAnimFrame(animate);

    drawElements();

};

var onResize = function() {
    renderer.resize(window.innerWidth, window.innerHeight);
}

var drawElements = function() {

    var ball = new PIXI.Sprite.fromImage("./img/ball.png");

    ball.position.x = (window.innerWidth / 2) - 5;
    ball.position.y = -10;

    ball.scaleX = ball.scaleY = 1;
    stage.addChild(ball);

    var t1 = new TimelineMax({onUpdate:animate, onUpdateScope:stage});
    t1.to(ball, 1.5, {y: (window.innerHeight / 2), ease:  Bounce.easeOut})
    .to(ball, 2, {scaleX: 10})
    .to(ball, 2, {alpha: 0});

}

var animate = function() {
    requestAnimFrame(animate);
    renderer.render(stage);
}

window.onload = function() {
    init();
}

Cheers guys for help !

I'm trying to understand how to use PixiJS with the GSAP library TweeMax. For that, I used to look some code into project using the two library, like this one : http://www.shanemielke./archives/usopen-sessions/

But, I've some trouble to understand why I can't scale. When I try to scale, my ball goes to the top left of my window [0, 0]. And When I specify scaleX and scaleY, there is nothing. In the both cases, my animation continue without any mistake...

Here is my code

var renderer,
    stage;

var init = function() {

    // We create the canvas element
    stage = new PIXI.Stage(0x202020);
    renderer = new PIXI.CanvasRenderer(800, 600, null, false, true);
    document.getElementById("loader").appendChild(renderer.view);

    $(window).resize(onResize);
    onResize();

    requestAnimFrame(animate);

    drawElements();

};

var onResize = function() {
    renderer.resize(window.innerWidth, window.innerHeight);
}

var drawElements = function() {

    var ball = new PIXI.Sprite.fromImage("./img/ball.png");

    ball.position.x = (window.innerWidth / 2) - 5;
    ball.position.y = -10;

    ball.scaleX = ball.scaleY = 1;
    stage.addChild(ball);

    var t1 = new TimelineMax({onUpdate:animate, onUpdateScope:stage});
    t1.to(ball, 1.5, {y: (window.innerHeight / 2), ease:  Bounce.easeOut})
    .to(ball, 2, {scaleX: 10})
    .to(ball, 2, {alpha: 0});

}

var animate = function() {
    requestAnimFrame(animate);
    renderer.render(stage);
}

window.onload = function() {
    init();
}

Cheers guys for help !

• javascript
• gsap
• pixi.js

1 Answer 1

The scale property of a PIXI Sprite is a Point with x and y properties, so instead of:

ball.scaleX = ball.scaleY = 1;

You need to do:

ball.scale.x = ball.scale.y = 1;

When you tween the scale you need to pass TweenLite the scale object, instead of the sprite itself, like so:

tween.to(ball.scale, 2, {x: 10});