Clearing PIXI canvas in ticker so animations don't write over top eachother

[atflick]

Hello, new to GSAP and PIXI.  I'm trying to make this page transition that drops bars from the top of the screen and cover the content that then shrink back down and reveal the next page underneath.  The issue I'm having is that it seems like the the already drawn graphics aren't disappearing mid-tick so you don't see them shrink down to a heigh of zero and also move the y position to the height of the window.  You can see in the pen that I have the bars dropping from the top but then when I try to run the next staggerTo and trying to tween the height to 0 and y position to bottom of the page you don't see the animation because I believe it's trying to add more graphics on top of the ones already drawn.  I think i need to figure out a way to clear the existing graphics on every tick so that it gives the appearance of them shrinking.  Any thoughts here? I'm going off this comment in this post and tweening an object that relates to the height and position of the graphics I am trying to animate 

 

See the Pen qwjaaR by atflick (@atflick) on CodePen

[GreenSock]

 

1 hour ago, atflick said:

I believe it's trying to add more graphics on top of the ones already drawn.  I think i need to figure out a way to clear the existing graphics on every tick so that it gives the appearance of them shrinking.

 

Yep, that sound right to me. 

 

This is definitely a PIXI question, not a GSAP one. We really try to keep these forums focused on GSAP-related questions, but I quickly forked your demo and added a clear() and restructured just that ticker method that draws things. I'm not sure it's the "best" way, but it appears to work: 

See the Pen 49e3047bdf930137a338d9542fc91891 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

[atflick]

Ah yes thanks!  I guess it's not a good idea to have ticker.add called inside a loop like I was doing when you can just loop inside the call.  Sorry about the pixi question, seems like you guys are pretty knowledgeable on both libraries working together so thanks for answering anyways.  Much appreciated.