[CSS animation does not work on Iphones]

Hello!

Any css animation inside block with applied Draggable does not work on Iphone 8, Iphone X, Ipad Pro. Example: https://designgovno.ru/gsap-scroll/

The blue rectangle is not inside the block and it rotates. The red rectangle is inside the block and it is not. Everything works on desktops and Android.

JS:
Draggable.create(".scroll", {
  type: "scroll",
  edgeResistance: 0.5,
  throwProps: true
});

Does anyone know how to resolve this problem?

 

 

[Multi-touch breaks Draggable]

On 4/19/2018 at 12:27 AM, GreenSock said:

Yeah, that's kinda by design because multi-touch typically enables other stuff like pinching/zooming. But to get the behavior you're after, why don't you set allowNativeTouchScrolling:false on your Draggable and then add this:

 

function ignoreEvent(e) {
  e.preventDefault();
  e.stopImmediatePropagation();
  if (e.preventManipulation) {
    e.preventManipulation();
  }
  return false;
}
document.addEventListener("touchstart", ignoreEvent, false);
document.addEventListener("pointerdown", ignoreEvent, false);

 

 

Does that help? 

 

Can we upgrade this script to manage pinch/zoom actions without using any libraries like hammer.js?