webakimbo

Tried your last suggestion as well. Weirdly, blurring the container results in the tiles disappearing altogether. In any case - seems like this is just outside the capabilities of PIXI/WebGL at this point. Appreciate the insight!

Hi Rodrigo - Appreciate the insight. If I understood your suggestion correctly, I created a shared PIXI.BlurFilter, added it to some of the tiles, and tied its value to the scroll. Pen here: https://codepen.io/webakimbo/pen/oNmPxWj If that's the implementation you had in mind, looks like the performance lag is still considerable. Let me know if my code doesn't look correct, though. More generally, I'd welcome thoughts on PIXI and why you haven't used it in years. Are there newer, shinier tools for 2D manipulation? Thanks again, Andy

Hi - Been using GSAP successfully for animating HTML/CSS to great effect. I recently applied it to a visual concept I had, and bumped up against some performance limitations. I'm here to better understand if those limitations are inherent to PixiJS, or to GSAP, or if I'm overlooking some performance gains, or if it's just my misunderstanding of when to reach for WebGL. Simplified summary of the design: I'm creating a grid of small colored squares (think: a low-res image, scaled up), and "exploding" the squares on scroll - each will travel in its own direction, with some rotation and scale. Proof of concept below. Works great! Nice and smooth. However, if I try to enhance the effect by applying a blur to some of the squares, the frame rate drops to the point of unusability. (You can try this by uncommenting line 52 in the pen.) I built an earlier proof of concept without Pixi - just divs + CSS - and hit basically the same wall. I'm new to WebGL and assumed it was just more efficient at redrawing, but it appears not in this case. Is WebGL good at, for instance, making something look like it's underwater, but no better than CSS at animating 100s of individual blurred graphics? Or is WebGL the right technology, but Pixi not the right tool? Or is the toolset absolutely capable of this, but I just haven't configured it correctly? Trying to suss out where WebGL shines and where it's not enough. FWIW, been hunting around for examples of ScrollTrigger + Pixi and there aren't many. The link to such examples in your own documentation appears dead. Thanks!