GSAP Draggable rotation lagging on iOS

[bellaz]

Hi,

 

I have a circular slider on my website, copied from this example

 

It works fine but I noticed a big performance issue on iOS devices, the slider is almost impossible to use because of the lag.

Is there something I can do to improve this?

 

The js is copied from the example, I just changed the css and of course the content of the cards.

 

Thank you

See the Pen eYbezYG by Mrchoy (@Mrchoy) on CodePen

[Cassie]

Hey there.

 

Unfortunately safari/IOS is pretty frustrating when it comes to animation. I've noticed far more rendering issues recently as well 😕.

 

You're already using transforms to animate and (if you copied this demo) you have will-change: transform on your element, so that's good. Those both help with performance.

 

Next up I'd check the contents of the cards, do you have incredibly large images or any filters/drop shadows on then. If you can reduce the size of the images that may help, similarly removing filters or drop shadows.

 

Sometimes certain animations just aren't possible on mobile though. If you do test and run through these steps with no luck, it may be time to look at making a simplified version for mobile. You can use matchMedia for this.

https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/

 

 I would initially try and see how the carousel responds without snapping, and with and without inertia.  If you can show us the code you're actually using we might have other advice, but for now that's all I can give you.

 

Sorry there's no magic bullet! Good luck!

[bellaz]

Thank you for your quick response.

 

It was the filter drop shadow, I didn't know it could impact so much on the performances.

 

I'd like to ask you for another suggestion, if you don't mind.

 

In the circular slider of the example above, I have <a> elements instead of the simple <div> cards. The problem is that the click on the element is triggered also when i swipe vertically across the slider. This also happens if I remove the href and try to go to the linked page manually on the onClick callback.

 

That is very frustrating especially on mobile devices: is there a way to disable the vertical drag on a type: "rotation" Draggable?

 

My expected behaviour is this: 

• Swipe horizontalli -> The slider rotates
• Swipe vertically -> the page scrolls (which now doesn't)
• Click -> Open the link

 

Thank you very much!

[Cassie]

I'm not entirely following this question I'm afraid, but dragClickables might hold the answer for you?

From the docs

 

Quote

dragClickables
Boolean - By default, Draggable will work on pretty much any element, but sometimes you might want clicks on <a>, <input>, <select>, <button>, and <textarea> elements (as well as any element that has a data-clickable="true" attribute) NOT to trigger dragging so that the browser’s default behavior fires (like clicking on an input would give it focus and drop the cursor there to begin typing), so if you want Draggable to ignore those clicks and allow the default behavior instead, set dragClickables: false.

 

https://gsap.com/docs/v3/Plugins/Draggable/#config-object

[bellaz]

This option resolves the issue of the link opening while dragging vertically, but now of course the slider doesn't move when i drag a card!

Is there another way to achieve this?

[GreenSock]

@bellaz do you have a minimal demo that illustrates the issue? That'd go a long way toward getting you a good answer. 

 

My guess is that maybe you want something like this?: 

See the Pen VwNPqjO?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Notice I'm just checking to see if the pointer moved more than 3 pixels in either direction, in which case I call preventDefault() on the event to make sure the click doesn't happen. 

[bellaz]

Hi, thank you very much for your answers.

 

This is not exactly what I was looking for, but with the onPress and onRelease callbacks I managed to do what I was looking for.

 

Thanks again, I'm marking the answer addressing the original topic as correct.