How to get an "On Enter Viewport" animation to run when Horizontally Scrolling?

Animation
1

Hello!
I am brand new to Hype, but I’ve completed several tutorials to get myself acclimated. But I can’t get it to do what I need to, and I’m not sure if it’s user error or if it’s not something Hype is capable of.

I am trying to make a horizontally scrolling website like Apple’s iPad Pro Website and I need certain animations to fire when they become visible in the viewport.

I followed the guidance of the viewport/waypoint actions tutorial here and while they work vertically, they DO NOT work when I try to switch to horizontal. I am trying both options separately: using the On Viewport Enter behavior, and using javascript to add a Waypoint.

The On Viewport animation simply fires immediately, even though the width scale is not set to 100% and I have to scroll over to the object to see it, and I went to the Waypoint documentation and saw they have a horizontal mode (it seems as though you simply check for right-in-view rather than bottom-in-view) and it also fires immediately.

Has anyone else run into this issue when making a horizontal scrolling website, and if so, how did you handle it? I am attaching a hype file I made to show the issue… each scene is using a different strategy.

HorizontalScrollingTest.hype.zip (33.8 KB)

2

I like the question: I could see using that action myself; more specifically in HTML widgets for RapidWeaver themes, stacks, etc.

3

i’m not sure about waypoints … last update on github seems to be years ago. you may better go with intersectionObserver. this is a basic sample. please google for intersectionObserver to see options etc and also look up for a polyfill …

HorizontalScrollingTest.hype.zip (12.0 KB)

2 Likes
4

This does seem like a bug; I’d use @h_classen’s workaround until there is fix in Hype.

1 Like