milosptr Posted August 10, 2021 Share Posted August 10, 2021 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 Link to comment Share on other sites More sharing options...
OSUblake Posted August 10, 2021 Share Posted August 10, 2021 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. Link to comment Share on other sites More sharing options...
milosptr Posted August 10, 2021 Author Share Posted August 10, 2021 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. Link to comment Share on other sites More sharing options...
Solution OSUblake Posted August 10, 2021 Solution Share Posted August 10, 2021 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. 1 Link to comment Share on other sites More sharing options...
iDad5 Posted August 10, 2021 Share Posted August 10, 2021 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. 1 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