hypeGestureXPosition not working when scaling the document

Using JavaScript with Hype
1

Hi
I am using some JavaScript to hide/reveal image
The artwork is more complicated than the example, but you get the idea.
It does work okay unless I scale the window. When I scale the window down it seems like hypeGestureXPosition gets it’s relative position from the original canvas size when I drag the slider.

  • I need the whole image to be visible on the background. No cropping. I used an example from here (Responsive reveal of a picture) but you didn’t scale the background which I think is the problem in my case.
  • Ideally I’d like the slider to stop at the end of the image. Currently it goes past the border of the animation

Is there a way to make it work if the canvas is scaled down? Seems like I need to adjust hypeGestureXPosition to reflect the scaling?

REVEAL 2.zip (684.8 KB)

2

This is basically correct; the coordinates of hypeGestureXPosition come from the MouseEvent's pageX property, which is the untransformed window coordinates. Because you are using Zoom Contents in flexible layout, the element is within a scale transformation so that would need to be taken into account.

I’ll point out that Hype has some native ways to interact with the layout system that will probably be valuable, specifically the hypeDocument.setElementProperty() and hypeDocument.getElementProperty() functions (docs here). You can get and set the left, width, and scaleX properties. This will do so in a way that Hype’s runtime is aware of the changes, whereas setting the CSS directly (or via jquery) won’t and that could lead to issues.

You probably have two options:

  1. Figure out the multiplier by iterating through each of the element’s parents and multiplying the scaleX if it is available.
  2. You could probably not use Zoom Contents and instead use the flexible layout system on child elements instead.
1 Like
3

revealByQuery.zip (1.1 MB)

reuseable by simple query:
urlWithQuery
to use within iFrame … nothing more, nothing less :slight_smile:

4 Likes
4

Very interesting to make a reusable document in that manner!

5

Thank you all for your help! Best community ever :slight_smile:

6

I did the animation in a different way. The example doesn’t look well designed but it gives an idea of the functionality. In case anyone is looking for a similar solution:

*Responsive slider (scales down)
*Hide and reveal (before and after) - I had to use timeline control
*Elements react to mouse movements

Hope it is going to help someone.revealexample.hype.zip (809.4 KB)

2 Likes
7

This is a really nice effect!