I have successfully implemented a SVG mask scroll feature in Framer Motion. You can test it out on the sandbox by visiting this link: https://codesandbox.io/p/sandbox/svg-nextjs-masking-vgnhnd. However, there seems to be an issue with its performance on mobile devices. The size of the mask does not increase as expected when viewed on a mobile phone. Has anyone encountered a similar problem before and found a solution? Interestingly, there are websites where this SVG scroll masking works seamlessly on mobile phones.
If you want to see the deployed version, you can visit: but please note that the scroll mask may not work properly on mobile devices.
For reference, here is the link to the sandbox: https://codesandbox.io/p/sandbox/svg-nextjs-masking-vgnhnd.
Below, I have included my code snippets for App.js and style.css files:
import "./styles.css";
import { useScroll, useTransform, motion } from "framer-motion";
import { useRef } from "react";
export default function App() {
const scene = useRef(null);
const { scrollYProgress } = useScroll({
target: scene,
offset: ["start start", "end end"],
});
const imageScale = useTransform(scrollYProgress, [0, 1], ["300px", "3000px"]);
return (
<>
<div style={{ height: "30vh" }}></div>
<h1>Look at Masking using svg</h1>
<div className="main" ref={scene}>
<motion.div className="mask" style={{ maskSize: imageScale }}>
<img src="/cement-industry.jpg" />
</motion.div>
</div>
<div style={{ height: "100vh" }}></div>
</>
);
}
And here's the content of style.css file:
.main {
height: 250vh;
}
.mask {
position: sticky;
top: 0px;
height: 100vh;
overflow: hidden;
-webkit-mask-image: url(/mask-star.svg);
mask-image: url(/mask-star.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
It appears that the mask size issue persistently affects mobile phone users. Various attempts were made on different phones, resulting in the same outcome. If you have any insights or solutions to share, kindly let me know. Your help is greatly appreciated.