bellaz Posted March 19 Share Posted March 19 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 Link to comment Share on other sites More sharing options...
Solution Cassie Posted March 19 Solution Share Posted March 19 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! Link to comment Share on other sites More sharing options...
bellaz Posted March 19 Author Share Posted March 19 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! 1 Link to comment Share on other sites More sharing options...
Cassie Posted March 19 Share Posted March 19 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 Link to comment Share on other sites More sharing options...
bellaz Posted March 19 Author Share Posted March 19 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? Link to comment Share on other sites More sharing options...
GreenSock Posted March 19 Share Posted March 19 @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. Link to comment Share on other sites More sharing options...
bellaz Posted March 20 Author Share Posted March 20 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. 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