Help making this animation responsive

Hey!

So, I created this interaction on hover, with an image mask. It’s just a png with a transparent hole. The issue is, using the transform: scale/move interaction, it isn’t responsive for most screen sizes.

I’ve tried a few other approaches here for the reveal, but still not quite it. I’ve tried creating an oval shape with a div and changing the background image and that didn’t create the reveal effect that I want. This might require some Javascript, but obviously, if I can avoid that, I would.

Read-only link: CLICK HERE

This is down to the config you have specified in response to the image mask that you’re using. I think you’d be better off trying to experiment with a larger mask, using the same size aperture, and trying to place the image this way.

Forgive me if I’m wrong, but it appears to me that you’re working around mainly the mask size at the moment and you could drop your awkward specs if you use a different mask. Add some more white-space and try to see if you can place it better this way.

We did something similar a few months back, but purely using a div with the image inside of this, with a zoom effect on scroll which ended up presenting the ‘embedded’ image full screen and eventually scrolling beyond. (I wish I could show you but it’s a corporate client and not something we have access to anymore). You may be able to use a div in a similar way and mask out the edges but I’d firstly try a bigger mask.

1 Like

@iratefox Okay, sweet, I’ll try both out. You wouldn’t happen to have a link to that site if it’s published?

Let me know how you get on.

We don’t have access to any part of it anymore unfortunately, it was an internally hosted site on their intranet. I plan to revisit something like this in a few months or so anyway for a different project so if I remember I’ll come back here and provide a resource.

1 Like