Jump to content

brands & beyond GmbH

Mousemove state handling with gsap.registerEffect and Pixi.js

Recommended Posts

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 :D . 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)!




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

Link to comment
Share on other sites

  • brands & beyond GmbH changed the title to Mousemove state handling with gsap.registerEffect and Pixi.js

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. 

  • Like 1
Link to comment
Share on other sites

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.


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.