laggy Dragging element by x,y is laggy on mobile

[milosptr]

Hi guys, 

 

I'm having a problem with a Draggable plugin, or maybe it is my code error. Anyhow, the dragging animation works perfectly on desktop/laptop devices, but when you test it on the mobile device and try to move around fast by diagonal up and down, you can notice that some images are laggy.

I tried everything I knew it might help, but it always gets me on mobile devices. Surely, someone of you guys maybe had some similar problem, or can give me the direction on how I can optimize this animation.

Thanks in advance!

See the Pen mdmaXpM by milospetrovic (@milospetrovic) on CodePen.

[OSUblake]

1 hour ago, milosptr said:

I tried everything I knew it might help, but it always gets me on mobile devices. Surely, someone of you guys maybe had some similar problem, or can give me the direction on how I can optimize this animation.

 

That's pretty complex and mobile devices just don't have computing power of desktops. You can try setting will-change: transform; in your CSS to elements that are being animated. 

 

If that doesn't work, you should either tone it down for mobile, or just change to a faster renderer like canvas or WebGL.

 

[milosptr]

8 minutes ago, OSUblake said:

 

That's pretty complex and mobile devices just don't have computing power of desktops. You can try setting will-change: transform; in your CSS to elements that are being animated. 

 

If that doesn't work, you should either tone it down for mobile, or just change to a faster renderer like canvas or WebGL.

 

 

Thanks, for the fast response. I have tried with will-change but it's still laggy. Also on some older Windows laptops frame rate drop to 30fps or lower. 

Basically, I have tried to copy https://www.powerhouse-company.com/ and on their website it works perfectly well on both desktop and mobile devices. I just have no clue how they did it to be so smooth and fast.

[OSUblake]

2 minutes ago, milosptr said:

I just have no clue how they did it to be so smooth and fast.

 

WebGL. They are using three.js for the rendering and GSAP for the animations.

[iDad5]

Also as far as I can tell, while dragging in the original there is no movement/resizing happening inside the images. That will like impact the way the GPU can handle the layers.