Image reveal with mask from centre

Hi guys,

I am not new to Hype, I have already created a few things with it. But my current problem is driving me crazy, I hope you can help me.

I want to create an image-mask that animates when the image enters the viewport. So far so good, no problem.

However, the image always sticks to the top left corner of the mask, but I want the image to expand from the middle.

I am grateful for any help.
Best regards

THIS is the preview
HERE you can download the hype file (157.3 KB)
you need to animate the content in the opposite ... of the parent element


Yess, and an other option is to do it with a simple css trick (13.8 KB)

1 Like

nice effect :slight_smile:

1 Like

In case it wasn't clear, the rectangle in BanerMan's document has an inner HTML containing:


<img id="imageScroll" src="">

This has the effect of filling the rectangle as it is animated in size using the 'object fit:cover' property: object-fit - CSS: Cascading Style Sheets | MDN