Jump to content


PIXI Tween Low Performance

Moderator Tag

Recommended Posts

So I managed to get the particle to move attract towards the mouse but the performance is extremly bad and when I take out the "foreach" loop it only effects 1 particle/sprite. Can someone help me figure out what Im doing wrong. No codepen bec I have no clue how to load a json file, but heres the code.


    stars = [];
    gsap.ticker.add(() => {
    for (var i = 0; i < totalStars; i++) {
        var star = new Sprite(id["star.png"]);
        star.interactive = true// enable mouse and touch events    
        star.buttonMode = true// show hand cursor on mouseover
        star.=  rand(vWidth * .5 * -1, vWidth * .5 ); 
        star.= rand(vHeight * .5 * -1, vHeight  * .5); 
        function calculateStarPosition(star){
          const mouseCoords = app.renderer.plugins.interaction.mouse.global;
              var radius = 30;
              var dx =  mouseCoords.- (star.getGlobalPosition().x)
              var dy =  mouseCoords.- (star.getGlobalPosition().y)
              var dist = Math.sqrt(dx * dx + dy * dy) || 1;
              var angle = Math.atan2(dy, dx);
              if(dist < radius){
                radius = dist;
                // TweenMax.to(sign, 0.3, {scale: 2});
                gsap.to(star, {pixi:{scale: +.5}, duration:0.3});
              } else{
                // TweenMax.to(sign, 0.3, {scale: 1});
                gsap.to(star, {pixi:{scale: +.1}, duration:0.3});
            gsap.to(star, {pixi:{
                x: Math.cos(angle) * radius,
                y: Math.sin(angle) * radius
              }, duration:0.3});
Link to comment
Share on other sites

Hard to say without a demo.


I'd start by cleaning up that for loop code. There's no need to have the calculateStartPosition function and the forEach calls inside of a for loop.

  • Like 2
Link to comment
Share on other sites

Yeah, it definitely looks like problematic code. Like...INSIDE your for...loop, you're adding a new star and doing a forEach() on every one. So if you have 100 stars, the first one in the array is gonna have calculateStarPosition() run 100 times (which each creates a tween, so 99 conflicts). The second will run it 99 times, the third 98, etc. It's almost surely an issue in your code. 

  • Like 1
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.