Jump to content
Search Community

How do I prevent element flickering?

Rio test
Moderator Tag

Go to solution Solved by Rio,

Recommended Posts

I have a game app where target elements of `elm1` and `elm2` are constantly moving according to the value of `x1` and `x2` that are receivable via WebSocket. The issue with the code below is that the target elements blink and seemingly default to 0px. How can I fix this? Sorry for not providing CodePen URL because it's hard to implement WebSocket.

 

let xSetter1 = gsap.utils.pipe(

gsap.utils.clamp(0, 800), gsap.utils.snap(5),

gsap.quickSetter(elm1, "x", "px")

);

xSetter1(x1) ;



let xSetter2 = gsap.utils.pipe(

 gsap.utils.clamp(0, 800),

gsap.utils.snap(5),

gsap.quickSetter(elm2, "x", "px")

);

xSetter1(x2) ;

 

Link to comment
Share on other sites

Yeah, it's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. I know you said it'd be hard to create a minimal demo due to web sockets, but how about just firing off a few callbacks at various times to simulate that? In other words, just fake the web socket data coming in. Maybe 3 staggered setTimeout() calls (or drop the callbacks into a timeline - GSAP is great for that). 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). 

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

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

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.
×
×
  • Create New...