GSAP + PIXI

[Andreja]

Hi guys, I'm new to GSAP and i started using it with my PIXI slot machine project for my uni. I have problems with performance on mobile devices but on desktop everything is fine. 

 

When i open my application on mobile device, FPS is usually 60, but as soon as i start spinning the slot reels, frame rate drops drastically to almost 27 FPS and animation is quite buggy until it reaches the last slot machine reel then the animation looks normal as it should.

 

All sprites are between 50kb and 150kb, loaded in cache with pixi, and in general it does not use a lot of memory, its pretty lightweight. I set in my pixi app antialias to false.

 

I registered PixiPlugin and rest in example:

 

gsap.registerPlugin(PixiPlugin)
import gsap from "gsap";

PixiPlugin.registerPIXI(app)

app.ticker.stop();

gsap.ticker.add((delta) => {
        
        app.ticker.update();

        stats.end();
});

 

i am using tweens gsap.to(); for my animations.  I know that in pixijs when you want to ensure that object is moving at the same speed on low FPS you are updating its position using the delta time in pixi ticker functions, but i dont know how it works in GSAP.

 

This is the example code of spinning animation.

 

gsap.to(reel,
            {
                id: "bounce-start",
                duration: 0.2,
                ease: "none",
                pixi: {
                    y: bounceStartTo,
                },
                onComplete: () => {
                    // x is time that waits for the first reel to stop
                    const x = 0.5;
                    // y is actually the speed of the next reel stop iteration
                    const y = 0.75;
                    let duration = x * (this.reelIndex + 1) * y

                    gsap.to(reel, {
                        id: "spin" + this.reelIndex,
                        duration: duration,
                        // y: fin,
                        pixi: {
                            y: fin
                        },
                        repeat: -1,
                        ease: "linear",
                        onComplete: () => {

                            gsap.fromTo(reel,
                                { y: bounceEndTo },
                                {
                                    id: "bounce-end",
                                    duration: 0.2,
                                    pixi: {
                                        y: fin
                                    },
                                    ease: "linear",
                                    onComplete: () => {
                                        onCompleteFn()
                                    }

                                },

                            )
                        }
                    });
                }
            }
        )

 

Guys i dont know how to solve this, please helpp:((

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Andreja]

Hii, everything is good now, i figured out that PIXI BlurFilter was causing the framerate drop. It was using about 2x memory when i added blur filter. 

 

But now everything works great!

[Rodrigo]

Hi,

 

Is great to hear that you were able to find the cause of your issue and that you solved it. Is important to know that even in WebGL, blurring can become expensive, hardware-wise, especially if used in larger images/graphics and/or using large values for the blur filter.

 

Maybe this demo can help you getting in the right direction, it doesn't use GSAP but it's a good starting point and has very good performance IMHO:

https://pixijs.com/8.x/examples/advanced/slots

 

Hopefully this helps.

Happy Tweening!