Mask reveal not responsive

[infinit3]

Hi everyone,

I would be extremely grateful if this could be solved. So I coded a masked reveal and it works "fine" for Desktop, however; when I test it on my phone (iPhone) it stops working, just one big disaster.  and yes, I tried asking ChatGPT but made it even worse :')

Thank you so much ! 

codepen: 

See the Pen BaErmXo by infinite00 (@infinite00) on CodePen

[mvaneijgen]

Hi @Brandium welcome to the forum and thanks for being a club member!

 

There is a bit much going on in your demo if you could reduce it to just the mask animation (the part you're having trouble with) it will be much easier for us to help you debug. A note your animation also doesn't work on Desktop Safari (at least not in Version 17.2.1). 

 

There are a lot of ways mask animation can work in on the web and a few weeks back I'd written a guide how to use most of them. Maybe your the solution you're looking for is already in there. Take a look an I hope it helps you solve your problem, if not post back here (preferably with a more minimal demo) and someone will be here to point you in the right direction!

 

 

[infinit3]

Thank you for the quick reply, I cleaned up the GSAP code and the only thing left in in the demo is the mask, splitlines and rectangle.

The effect I am looking for (to be responsive as well) is basically like on : https://energy-park.co.uk/

Thanks a lot!

[Rodrigo]

Hi,

 

In the thread Mitchel linked to there is a specific section about this:

 

SVG Mask but on normal  tags

A really weird but really useful solution is creating an SVG that is 1px by 1px. Yep, you heard it write a 1x1 SVG. Everything with in the 0 - 1 pixel space will gets stretched over your image (if you give your clipPath the following tag clipPathUnits="objectBoundingBox”) and you’re golden, I’ve learned this from Dave Smyth over at https://davesmyth.com/clip-path-scaling where he has an even more in depth look on how and why this works, recommend giving it a read if you want to go this route!

 

See the Pen jOdJGQq by mvaneijgen (@mvaneijgen) on CodePen

 

That should be enough to get what you're trying to do.

 

Finally is worth noticing that if you use devtools in the site you linked, they're actually using clippath on the element that wraps the video element. If you inspect you wont see any mask CSS property in any element on that particular wrapper.

 

This should help you as well:

https://bennettfeely.com/clippy/

 

Happy Tweening!