pixijs Mousemove state handling with gsap.registerEffect and Pixi.js

[brands & beyond GmbH]

Hey guys again hope you´re doing fine.

 

I´ve had a great time with pixi and gsap over the past weeks and developed a tiny class for it. It will capture width and height of a selected element and appends a pixi generated canvas to it. A pixi container is stored inside filled with a matrix which represents the dimensions of the parent stage, but splitted to several smaller pieces (the gridDivider can be adjusted on class initialization on the bottom of the js). Now we have a prepared object with all  needed references and it´s ready to apply some gsap goodness on it.

 

Next I started with a Sub Class (HoverMatrixGrid) which captures data from the mousemove event and animate the "pixels". I created some animation blueprints with the mighty gsap.registerEffect(). and applied these as methods of the pixel object itself to alter states and get control over the animations. But atm the opposite is happening . I´m experiencing kinda artifacts / debris in the mousemove triggered animations, especially if you move the cursor diagonally some pixels on the edges don´t "fade out". If you swipe some seconds on the screen you will recognize them.

 

I can imagine there is something wrong with my state handling, but can´t figure it out since days, so I want to ask if someone had experienced this behaviour. Is it something which comes from the asynchronous handling of object data? Are these states nescessary?

 

It´s printing the generated "grid"-object with all it´s data and particles in the browser console.

ps: congrats to your newest release (3.10)!

 

Thanks,

Richard

See the Pen mdpjvex by rkxn (@rkxn) on CodePen.

[GreenSock]

Hi Richard! This is a bit beyond the scope of help we provide in these forums. You've got 700+ lines of code to dig through and it doesn't sound like your questions is really GSAP-specific. It'd be awesome if someone else has time to lend a hand - I just want to set expectations properly, that's all. It definitely sounds like a logic issue somewhere in your code. If you need to hire someone on a consulting basis, feel free to post in our "Jobs & Freelance" forum or contact us directly if you'd like GreenSock paid support. Otherwise, perhaps someone else can offer some ideas here. 

Good luck with the project! Looks like a cool effect. 

[brands & beyond GmbH]

Thanks @GreenSock, understandable. Not expecting anything

Maybe someone else knows an example which archives a similiar effect by modifying particles on mousemove. I want to squeeze the most out of it and any advice would be helpful since I want to archive this by my own. Or at least apply a technique which has the most outcome in terms of flexibility and performance.

 

I´ll try a different approach over the next days and will post my results here, if I got around the problem.