Image reveal with mask from centre

hallibus · February 22, 2022, 2:21pm

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

h_classen · February 22, 2022, 2:58pm

mask.hype.zip (157.3 KB)
you need to animate the content in the opposite ... of the parent element

BannerMan · February 22, 2022, 3:00pm

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

h_classen · February 22, 2022, 3:13pm

nice effect

Daniel · February 22, 2022, 3:53pm

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

<style>
#imageScroll{
	width:100%;
	height:100%;
	object-fit:cover;
}            
</style>

<img id="imageScroll" src="https://marmotamaps.com/de/fx/wallpaper/download/faszinationen/Marmotamaps_Wallpaper_Berchtesgaden_Desktop_1920x1080.jpg">

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