Greensock

[bionicGirl]

Hi,

this is my first try with Pixi and I would love to animate it using my fav tweening library Greensock. ABove is my pen. I don't get any errors, yet my displacementMap isn't animating... What am I doing wrong here? Any other improvements are also welcome. Thank you so much!

[ivan.popelyshev]

Because you render only initial stage. You need requestAnimationFrame, or you could look at pixijs.github.io/examples/#/basics/basic.js how to use Application, which scaffolds it.

[bionicGirl]

Thanks, I updated it, but for some reason the repeat, which is set to indefinitely, is being ignored. Any ideas? Thanks!

[ivan.popelyshev]

Pixi repeat or greensock repeat?

[bionicGirl]

Greensock repeat - as per codepen. Thanks!

Also, when I check the debug view and inspect the DOM, it looks like the canvas element has been added after the scripts at the bottom of the page with a width:800 and a height:600px. I never defined that anywhere...

My intention is to actually use a preexisting canvas element in the order that it had been added to the DOM structure as I need to layer it below some other divs. Please advise and see screenshot attached. Thanks!

[Rodrigo]

Take the timeline instance out of the animate method. Right now the animate method is being called on every requestAnimationFrame event, so on every one of those you're creating a new timeline instance which ultimately creates an overwrite issue, that's why the endless loop doesn't happens.

This code works:

animate();

function animate() {
  requestAnimationFrame(animate);
  renderer.render(stage);
}

var tl = new TimelineMax();
tl
 .to(displacementSprite, 10, {
    ease: Linear.easeNone,
    repeat: -1,
    x: -800, 
    y: 800
});

 

[bionicGirl]

Thanks so much Rodrigo! I am almost there! Now I just don't understand why the canvas element is being added to the bottom of my DOM (where the scripts are).
When I check the debug view and inspect the DOM, it looks like the canvas element has been added after the scripts at the bottom of the page with a width:800 and a height:600px. I never defined that anywhere...My intention is to actually use a preexisting canvas element in the order that it had been added to the DOM structure as I need to layer it below some other divs. Please advise and see screenshot attached. How would I be able to control this?

Thanks!

[Rodrigo]

You're welcome.

I believe that's a codepen thing, nothing more. The target canvas tag you created is the one being used by PIXI.

If you try on a regular server or the codepen debug view, you'll see it on the correct order.

 

[bionicGirl]

I managed that the canvas dimensions are displaying correctly by moving the vars defining width and height above the PIXI.autoDetectRenderer code.

I also changed the z-index of my divs to accommodate the same structure as in the DOM, but I am still curious if there is another way of accomplishing this, since I am already targeting an existing canvas element.

Or is the canvas tag always moved to the bottom before the body closing tag? Thanks!

[Rodrigo]

Sorry this escaped when I checked the codepen:

document.body.appendChild(renderer.view);

You're basically appending the renderer to the body tag, after the code is executed, hence it goes after the script tags. Append the renderer to the DOM element you want and it'll solve the issue:

var pixiWrap = document.getElementById("banner");

pixiWrap.appendChild(renderer.view);

 

[bionicGirl]

Awesome! Thanks so much!!