Jump to content
GreenSock

milosptr

Dragging element by x,y is laggy on mobile

Go to solution Solved by OSUblake,

Recommended Posts

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

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

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

  • Solution
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.

  • Thanks 1
Link to comment
Share on other sites

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.

  • Thanks 1
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.
×