BenjaminO

After digging a bit I found out that declaring the type explicitly was doing the job here 🙂
const { isMobile, isDesktop } = context.conditions as gsap.Conditions  

Hello @GreenSock and thank you very much for your response. The problem can be seen in the video when I first refresh the site, the lines aren't appearing one by one. After digging about this, I think I found the reason of the issue and I wanted to share it. I declared in my code :
window.onresize = function () { aboutblockParent.revert(); aboutblockChild.revert(); } I found out that the problem is caused by the address hiding or showing in mobile browsers, causing the height of the screen to change, hence triggering the onresize function. When I inspect the code in Safari IOS when I pull to refresh the site, the revert function is called instantly meaning (in my opinion) that it triggers the onresize event. 
 
I wrote a small workaround that works :
let cacheWidth = window.innerWidth; window.onresize = function () { let newWidth = window.innerWidth; if(newWidth != cacheWidth) { aboutblockParent.revert(); aboutblockChild.revert(); } } Thank you again !

Hello guys,
 
Thank you both for your ideas !! I finally got what I wanted and even if that's not the prettiest code, it's working quite well. I took your first submission as a base @mvaneijgen even though the flip plugin might be interesting as it requires less code. I let you my results updated here! Thank you all again 😁

 

Hello ! 👋 
After some research I fixed the problems I had. for the proxy I moved the style setting into the OnPressInit function in order to always refresh size and position of the proxy before dragging.
onPressInit() { ... gsap.set(proxy, {width: Image.offsetWidth, height: Image.offsetHeight, position: "absolute", pointerEvents: "none", top: Image.offsetTop, left: Image.offsetLeft, border: "1px solid red"}); }, I disabled zIndexBoost because it was affecting the proxy divs and not the images. Also I added this OnDragStart function to reinitiate zIndex of all images to 1 first, and then set the zIndex of actual dragged image to 2.
onDragStart() { gsap.timeline() .set(".img-drag", {zIndex: 1}) .set(Image, {zIndex: 2}); },
2022-04-09_18-18-59.mp4 Thank you again all for your help and support, I really appreciated it ! 😉

See the Pen GRydOmN by benjamOD2 (@benjamOD2) on CodePen