Somewhat faltering/not fluent motion in floating project view

[Lennard van de Laar]

Hi all,

 

we are building a portfolio for a client and the wanted us to float the project items on a sky.

 

 

As you can see the movement of the project items is somewhat faltering/not fluent.

Do you have any tips on improving?

 

e.g.

Is there a way to smooth out the movement?

Is there a way to disable 'dragging'  on desktop only?

Is there a way to make items zoom on a 'moving' mouse pointer only?

 

Hope you guys can share some thoughts that might help us improve the movements!

See the Pen GRYXjmL by lvdlaar (@lvdlaar) on CodePen

[Rodrigo]

Yikes!!! that's over 700 lines of code!

 

Any chance to reduce it even further? Where should we look for problems in that codebase?

 

For performance maybe try will-change: transform in the image elements. Maybe try canvas or WebGL like PIXI or THREE.

 

To disable Draggable just on desktop. IDK, there are always complicated ways to check for that (you already have a large regex for checking mobile devices) but I always try to simplify it to screen size and if the device has touch events in it. Sure some desktops have touch events but large screen sizes.

 

15 hours ago, Lennard van de Laar said:

Is there a way to make items zoom on a 'moving' mouse pointer only?

Do you have an even more minimal demo for this? Again IDK where should I look for that and we don't have the time resources to comb through 700 lines of code in order to find that particular feature.

 

Happy Tweening!

[Lennard van de Laar]

Hi Rodrigo, Thx for your thoughts. I've tried to minimalise the lines of code. I've also added the will-change: transform;  on the images. But that does not seem to do anything, or am I using it wrong?

I noticed that the faltering especially occurs when you move the mouse. Is there a way to smooth out the way the movement of the images reacts to the movement of the mouse pointer location?

 

Hope you can point me in the right direction.

[Cassie]

Quote

For performance maybe try will-change: transform in the image elements. Maybe try canvas or WebGL like PIXI or THREE.

Seconding this - Every time I've seen this effect done well it's been using canvas, it's pretty perf intensive to be moving images around like this

 

Also for mouse movement stuff, quickTo or quickSetter are more performant - although I doubt you'll see a noticeable visual difference

https://greensock.com/docs/v3/GSAP/gsap.quickTo()

https://greensock.com/docs/v3/GSAP/gsap.quickSetter()

[Shrug ¯\_(ツ)_/¯]

You’re still approximately 300 lines of code past the original concept by @ZachSaucier . I suspect most your issues are coming from your own additional logic (not GSAP) concerning the features you have added and the general jquery-ifying of things probably has not help also. 😉