Jump to content
Search Community

Animating divs (with anchors) not reversing on iphone 12

Nysh test
Moderator Tag

Recommended Posts

Hey fam, 

Getting some weird behaviour on iphone 12 Pro (IOS 14.3). 

If you click to reverse the animation (soon after first click), during the stagger of the divs that have anchors, the reverse does not seem to register.
However if you click to reverse during the regular divs stagger, it reverses fine, as expected.

On the computer in chrome, it works fine and reverses as expected during both staggers.

I've made a basic codepen to illustrate. Any help would be greatly appreciated to get this working! :)

 

See the Pen RwLMJYp by Nysh (@Nysh) on CodePen

Link to comment
Share on other sites

Heya!

 

If you put a color on the background of the links you can see that it's spanning the whole width of the screen.
Edit: Nope, that was the parent element, my mistake. Either way - I think what I've mentioned below is likely the issue.

See the Pen XWeqXbR?editors=0110 by GreenSock (@GreenSock) on CodePen



I imagine what's happening is that on iPhone the document event listener isn't firing because you're clicking on a link and that's taking priority.

Usually in these situations when an element's interfering with a click event I'd suggest adding pointer-events none... but... it's a link so definitely don't do that. Maybe you can style the links so they don't take up as much space?

 

Link to comment
Share on other sites

Hi Cassie, 

I don't think it has to do wit the size of the anchors or pointer-events interefering, as the issue still persists if you click far away from the anchor (with all pointer-events set to "none"). I just tested on an ipad 9th Gen IOS 15.1 and it still happens.

 

See the Pen eYGrRxZ by Nysh (@Nysh) on CodePen



What's weird is if you start in the 'reversed state' and then click during the anchor movement it seems to register. That could be a workaround I'll have to explore, but surely theres a simple explanation for why it doesn't register.

Link to comment
Share on other sites

Hey Blake, 

 

Thanks for having a look. 


It works perfectly on chrome/safari on my laptop. However, I just tested the demo you posted on a safari browser on my ipad (9th Gen) IOS 15 and the toggle doesn't register if pressed during the anchor part of the stagger.

Link to comment
Share on other sites

Ok so I recreated the stagger using pure css transitions and a simple toggle class to move the animation forward and backwards. This seems to solve the issue, in terms of reversing the animation during the stagger of the anchors. 

I would prefer to use GSAP though :P rather than classes. I wonder if this helps to troubleshoot what could be causing the issue? Check codepen below~

 

See the Pen XWeqewL by Nysh (@Nysh) on CodePen

Link to comment
Share on other sites

2 hours ago, Nysh said:

However, I just tested the demo you posted on a safari browser on my ipad (9th Gen) IOS 15 and the toggle doesn't register if pressed during the anchor part of the stagger.

I just tried on my iPad (iOS 15.2) and the GSAP version worked flawlessly. I also tried a different/older iPad with iOS 15.1. Worked great. I'm perplexed. I cannot break the GSAP version anywhere. Are you sure that the exact CodePen that Blake posted did NOT work on iOS 15.x Safari? I clicked multiple times WHILE things were animating and it never missed a beat. Does it only happen on that one iPad? Do you maybe have a 3rd party tool installed in that browser that might be monkeying with things? Can you get anyone else with an iPad to reproduce the issue? 

Link to comment
Share on other sites

Hmmm. Its a brand new ipad, so doubt it's a third party tool. 

Just tested Blake's one again and the issue is still there. It's weird. If your second click happens quickly after the first one (during the anchor stagger), the success rate of the reversal is like 50%. This is what happens when I try it a few times in a row. 

Link to comment
Share on other sites

I've been trying for awhile to replicate this issue with no success. 

 

Here's another version where I output some info just to see what's going on. There is a toggled flag that should always match the reversed state, and they should both be true on an even number of clicks.

 

I also changed autoAlpha to a very low opacity just to see if that might be interfering with it.

 

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

 

Link to comment
Share on other sites

ok so just did some further testing on your demo. Thanks heaps for that.

And as far as i can see, it is def the change to the autoAlpha thats causing the issue. When the opacity is at 0.001, it has 100% success.  I'm finding with the autoAlpha version, the click itself doesn't register sometimes and that's why it wasn't reversing. The weird thing is, the toggle button flashes on the iphone/ipad as if it has been clicked. 

So strange why that property interferes - I think the solution for me will be to use the opacity setting to 0.001 :) so i can use gsap for the animation.

Link to comment
Share on other sites

Yeah, just try changing "autoAlpha" to "opacity" and let us know if that solves things. The only difference is that autoAlpha sets visibility: hidden when it hits 0. Also, does it ONLY experience the problem when you double-tap very quickly? Some mobile devices have a built-in 300ms delay in touch events and I wonder if it's somehow related to that. But again, both of my iPads can't reproduce the problem at all. Ever. As far as I can tell, nobody else can reproduce it either. I wonder if you think you're tapping but your finger is sliding off the button and it's not actually triggering? Did you make sure that the "click" event is indeed triggered via JS? Maybe make it change the color of the background to verify visually or something. I really don't think this has anything to do with GSAP. 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...