I have a timeline that continues on enter viewport, and is reversed on exit. I’ve done this without error many times but in this instance it freezes and jumps to the end of the animation sometimes.
Here is the page demo.
(Viewport is the learn more button, scroll down, wait for it animation to finish and scroll up quick. Problem happens on the mobile layout too - this issue occurs probably 30% of the time.)
Video:
Here is the hype document. Map.hype.zip (254.1 KB)
A side question:
Will having many viewports effect the transitions effect the performance of the page? I placed this document 20 times into a page and it ran fine. Will it be the same with different documents of similar complexity?
I’m actually using chrome, but I’ve reproduced the error with safari and firefox.
I am also at default zoom (100%), but the problem still occurs whilst zoomed in.
CSS left/top was already off, but I turned WebKit graphics off and the problem still occurred.
Have you seen this problem before?
Here’s another document with the same issue for reference. Buy.hype.zip (146.5 KB)
I haven’t seen this before; I’m a little puzzled why I have a harder time reproducing it. One thing that it did look like to me was that the mouse needed to be in such a position where it would trigger the learn more animation - do you also find that to be the case?
My guess for a workaround would be to have a different element (like an empty box with no border/background) be the element that has the viewport actions so other animations/events are not interfering with it. Let me know if that happens to resolve it for you.
Im very surprised you can’t replicate this! It happens on Safari, chrome and firefox, on other computers and also on my iPhone.
I tried what you said and made a new element with viewport in/out and it didn’t work. Then I created another element bigger than the other, with the smaller one being viewport-in and the bigger one being viewport-out.
All solutions have the same problem.
It also isn’t due to triggering the learn more animation, as I’ve removed all other animations and it still didn’t work.
All of my documents are now experiencing this problem, here’s another one:
The .hype document you attached alone doesn’t scroll; can you send any other files necessary (like the .html file it is included in)? That might help me better reproduce. Thanks!
I’ve uploaded everything you’ve asked for, along with the corresponding hype files. The only thing I changed is the path so that this can be opened locally.
I have also checked the file, and the bug definitely still exists. Thanks for the help, I really appreciate it!
Now we’re talking! I’m able to reproduce; it is timing dependent - basically you have to scroll up in the “dead zone” in the 2/3 of a second where there are no animations from 0:00.00 to 00:00.20 on the Map timeline to trigger this. It turns out it isn’t a waypoint issue at all, but has to do with reversing a timeline when nothing is actively being animated.
I have a fix for the next version of Hype.
A workaround until then is to animate something in this timeframe; say have a dummy element with opacity 0% that just animates its left position.
Thank you so much!, I’m very impressed at how quickly you managed to figure this out!! I’ve been melting my brain trying comparing documents with broken ones.
