startTimelineNamed does not work on iPad

1

Hi!
My startTimelineNamed over a symbol it works only when I'm testing it on my Browser in the iPad mode but, when I upload it to the server and I test it again on my iPad then, does not work.
Any suggestion please?
Thanks!

2

I'd be curious if the developer tools console reports anything? Does it happen on normal browsers hitting the same server, or only an iPad?

There's no general reasons it would be different between the two. The most likely causes could be:

  • You are using multiple layouts and referencing something by ID that doesn't have that ID in a different layout. (And for some reason this layout isn't being shown in the browser preview mode).
  • You are using some external javascript code for the call, but the server version is placed in an iframe or something like that

I'd be curious to see a zip of your .hype document and the URL of your server.

3

Ok!!

Here, there is the link for the zip file with the source:

and the following url is to test it on iPad:
https://www.integral3dindustrial.com/Pruebas/design3D.html

As you will see in the computer, the moment you scroll down, two animations start. This same behavior is not working when you run on an iPad.
I'm looking forward your answer!

Thanks a lot!

4

did not test on ipad device, but one thing to mention that can cause errors/mismatches:

you should do some garbage-collection regarding the eventlisteners. otherwise the scroll will run its appended function for each layout that's been loaded. this'll for example result in a method-call for a startTimeline on a symbol that will not exist in this moment.

see your logging after a few resizes and scrolls:

Bildschirmfoto 2021-11-05 um 13.33.21
Bildschirmfoto 2021-11-05 um 13.33.21528×1092 210 KB

5

I've solved the matter with the previous screenshot but it does not work on iPad. It's weird because only happens on iPad screen. Even, when you're testing on Chrome with the Developer tools with the iPad dimensions, the test is running ok.

6

you can connect an iPad via cable and then use safaris developer tools to debug the device.

//////
regarding your new setup ... still buggy regarding the scroll-event:

Bildschirmfoto 2021-11-05 um 14.24.52
Bildschirmfoto 2021-11-05 um 14.24.521338×1092 351 KB

////

i would not use persistant symbols in a nested folder. Hype has had some mismatching regarding this setup. not sure if this is solved yet. instead use normal symbols and fetch the id for the hypemethod on the symbol by using a class as identyfier.

7

It has most likely to do how you structured your code (if/else/window.zero) assuming that scroll fires in a continues way. Please consider that iPad might handle it differently, duo to touch:

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Hence, it might be that you need a solution like:

8

Hype has a builtin way to trigger behaviors due to viewportentry/exit (based on waypoints) ... or you try the intersectionObserver

2 Likes