Zoom using scale not working on Android phones

[Devotee007]

Hi, 

 

I have this code below for zooming images on my site. It works as expected on iPhones, but know I noticed that it doesn't work at all on Android phone. I have missed something?  Should I perhaps use another eventlistener? 

 

        // ZOOM IMAGE
        const image = document.querySelectorAll(".js-image");
        const zoomMin = 1;
        const zoomMax = 2.8;
        const zoomStep = "+=0.35";
            
        image.forEach((img) => {
            img.addEventListener("click", () => {
                let zoomValue = gsap.getProperty(img, "scale");
                
                if (zoomValue < zoomMax) {
                    gsap.to(img, {duration:.5, scale:zoomStep, transformOrigin: "50% 50%", ease:Expo.easeOut}); 
                }

                else {
                    gsap.to(img, {duration:.4, scale:zoomMin, transformOrigin: "50% 50%", ease: "elastic.out(.7, .6)"}); //.8
                }
            });
        });
   

 

[Devotee007]

It seems the event listener click doesn't work here, but it does on other scripts I got. Like this one for example.

 

 const rotate = gsap.timeline({paused:true})
        .to(".js-image-container", {rotate:"+=90", transformOrigin: "50% 50%", ease:Expo.easeInOut, duration:.5}, 0)
        .to(".js-btn-arrow", {rotate:90, transformOrigin: "50% 50%",  ease:Expo.easeOut, duration:.1}, 0)
        .to(".js-btn-arrow", {rotate:0, transformOrigin: "50% 50%", ease:Back.easeOut, duration:.4}, .1);

    
        document.querySelectorAll('.js-btn').forEach(item => {
            item.addEventListener('click', event => {
                if(!rotate.isActive()){
                    rotate.invalidate().restart();
                }
            })
        })

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Devotee007]

Here is a demo. It works on desktop and iPhones. The "click" works for drag and rotate on Android, but not zoom? And then I use touchstart instead it zooms on drag, and I don't want that. Haven't found a way around it. 

See the Pen ZEoJVqN by Devotee007 (@Devotee007) on CodePen

[mvaneijgen]

I don't have access to an Android device at the moment my self, but here are somethings you could try

• Draggable also has a onClick handler, any reason you are not using that? 
• There also is a minimumMovement threshold, maybe increase that for mobile devices

• Sense clicks when the element moves less than 3 pixels - A common challenge is figuring out when a user is trying to click or tap an object rather than drag it, so if the mouse/touch moves less than 3 pixels from its starting position, it will be interpreted as a click and the onClick callback will be called (and a "click" event dispatched) without actually moving the element. You can define a different threshold using minimumMovement config property, like minimumMovement: 6 for 6 pixels.

https://greensock.com/docs/v3/Plugins/Draggable

[Devotee007]

8 minutes ago, mvaneijgen said:

I don't have access to an Android device at the moment my self, but here are somethings you could try

• Draggable also has a onClick handler, any reason you are not using that? 
• There also is a minimumMovement threshold, maybe increase that for mobile devices

 

• Sense clicks when the element moves less than 3 pixels - A common challenge is figuring out when a user is trying to click or tap an object rather than drag it, so if the mouse/touch moves less than 3 pixels from its starting position, it will be interpreted as a click and the onClick callback will be called (and a "click" event dispatched) without actually moving the element. You can define a different threshold using minimumMovement config property, like minimumMovement: 6 for 6 pixels.

https://greensock.com/docs/v3/Plugins/Draggable

I get the same result using  onClick instead of onPress. The image zooms in on Android, I guess it it because I have to, I think, use touchstart to make the zoom work on Android. It's odd, everything else on the site works with click on Android. 

[GreenSock]

I just checked on my android device and I didn't see any problems with using Draggable with an onClick. All worked exactly as I expected. It's tough to troubleshoot if we can't replicate it. Any other clues about how to replicate? 

[Devotee007]

I'm sorry, I think I haven't been clear enough. The thing that don't work is clicking the image to scale/zoom. Drag and rotate works as expected. 

[GreenSock]

On 9/24/2022 at 3:30 AM, Devotee007 said:

I'm sorry, I think I haven't been clear enough. The thing that don't work is clicking the image to scale/zoom. Drag and rotate works as expected. 

Yes, I understood that's what you were saying. I tested the "click" event handlers and the onClick() in Draggable on an Android device and things seem to work as expected. 

[GreenSock]

I'm pretty sure the problem is that your code is throwing an error in your onRelease which immediately halts JS execution so your click events don't get triggered. You're referencing StartX and StartY which don't even get set until the user starts dragging, thus if they merely click, those will be null (so you're trying to animate x and y to null). Also, I wonder if your Expo.easeOut is not found. I'd recommend the new syntax, like "expo.out". Once I fixed the problems in your onRelease, it seemed to work just fine. 

[Devotee007]

1 hour ago, GreenSock said:

I'm pretty sure the problem is that your code is throwing an error in your onRelease which immediately halts JS execution so your click events don't get triggered. You're referencing StartX and StartY which don't even get set until the user starts dragging, thus if they merely click, those will be null (so you're trying to animate x and y to null). Also, I wonder if your Expo.easeOut is not found. I'd recommend the new syntax, like "expo.out". Once I fixed the problems in your onRelease, it seemed to work just fine. 

Ah, ok, thank you! I will test that and see how it works.

Edit: I tried to change the things you mentioned. It works! Thank you. I'm still new to the new syntax, mixed things up a bit.