geedix Posted March 29, 2022 Share Posted March 29, 2022 Maybe someone knows why my spritesheets animate fine in Chrome, Edge, Safari - but in Firefox they give a little blank flash when switching to the next spritesheet? I'm using GSAP with stepped ease to animate nine spritesheets, each with 18 frames, one after the other. They're 8192px wide and move horizontally by 442px per frame. If I slow the animation down to one frame per second, you can still see a blank flash on Firefox when going from one spritesheet to another. The flash is only for a brief few milliseconds. In my timeline, when one spritesheet's tween finishes, I set its autoAlpha to 0, and the next one to 1. This seems to be when the flash happens. I'll work on a Codepen example, and see whether it still happens there. thanks Link to comment Share on other sites More sharing options...
geedix Posted March 29, 2022 Author Share Posted March 29, 2022 Well I made a Codepen, but I don't see the flicker here. Maybe this will help me figure it out... but it seems like it might take me a while to crack this one... See the Pen dyJRmbg by geedix (@geedix) on CodePen Link to comment Share on other sites More sharing options...
geedix Posted March 29, 2022 Author Share Posted March 29, 2022 I realize it's hard to help with a bug that I can't reproduce on Codepen, but allow me to talk to myself for a minute. I think FF is just chugging a bit. It's slow to turn the opacity on and off when swapping sprite sheets, in the context of a busy page. I can fix the problem by showing the new sprite .05 seconds sooner than I hide the old one. The problem is that you can glimpse the overlapping frame in other browsers. I'll keep working on it and report back if I find a solution. My ideas include forcing the GPU to get involved, changing the timescale, doubling the last frame in each 18-frame sprite... or detecting FF and skipping the animation for those users. Let me know if you have ideas, too. thanks Link to comment Share on other sites More sharing options...
GreenSock Posted March 30, 2022 Share Posted March 30, 2022 Tough to say without being able to reproduce it, but the fact that it works fine on CodePen makes me suspicious that there's something else going on in your setup that's messing things up. I kinda doubt that it's just CPU load. That shouldn't cause gaps like that. 🤷♂️ 1 Link to comment Share on other sites More sharing options...
OSUblake Posted March 30, 2022 Share Posted March 30, 2022 Have you tried canvas? See the Pen bqEamV by osublake (@osublake) on CodePen See the Pen VwMLmBw by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now