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
(Hans-Gerd Claßen)
2
mask.hype.zip (157.3 KB)
you need to animate the content in the opposite ... of the parent element
2 Likes
BannerMan
(BannerMan)
3
Yess, and an other option is to do it with a simple css trick
mask_css.hype.zip (13.8 KB)
1 Like
Daniel
5
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
3 Likes