Smooth snake segments problem

[h_ivanov]

Hello everyone,

I have the problem you can see on the video. When i pause the game the snake segments are correctly positioned, but when its running and a movement is made the segments are washing and not synced correctly. If i remove the duration the snake movement starts to be laggy and it is not smooth. At codepen i uploaded render.js as a HTML, main.js where we use ticker to init the game start as CSS and snake.js as JS where we care about the snake animations.

See the Pen EaYbXMX by HristiyanIvanov (@HristiyanIvanov) on CodePen.

[GSAP Helper]

Without a minimal demo that clearly illustrates the issue, it's almost impossible to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. 

 

Your CodePen doesn't show anything except raw JavaScript which isn't helpful. You pasted the same thing into the HTML, CSS, and JS panels. 

 

Please don't include your whole project. Just some colored 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: 

 

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

[h_ivanov]

Hello, sadly I cant provide the whole code base, because the whole program is on multiple files and uses multiple libraries. I can give github repo for anyone that wants to download the whole code and check it locally. That is why i uploaded a video to illustrate the problem.  https://github.com/HristiyanIvanov/snakegame

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "here's my github project..please weed through all my code and find the problems for me" requests. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

This sounds unrelated to GSAP anyway - isn't it a Pixi.JS question? 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[Rodrigo]

Hi,

 

You could check these links and see if it helps somehow:

https://www.html5gamedevs.com/topic/29349-snake-html5-snake-game-with-pixijs/

 

https://jaymeh.co.uk/pixijs-getting-started

 

Also check this post by @OSUblake

 

[h_ivanov]

Well acutally I think it is GSAP question because without gsap animation, the snake and its segments move fine but not that smooth 

[Rodrigo]

Hi,

 

This is not the simplest thing to achieve and it all starts with PIXI and a working demo. Your demo is not working correctly so is hard to know exactly what could be the issue. I'd strongly recommend you to check the PIXI resources and the demo by Blake.

 

As mentioned this is not the easiest thing to create and we don't have the time resources to create a custom demo or solve complex issues for our users. While I have some experience with PIXI, certainly is not enough to know and understand what's going on in your code and where the problem could reside.