GSAP Scrollrrigger

Viewed 18

how to make this responsive to mobile, please.

the code works fine on computer, but mobile devices. i have tried all possible options, but failed. i want to use it on Elementor. or else if someone have any other option please do suggest.

<script>
;(function(){
let chck\_if\_gsap\_loaded = setInterval(function(){
const eleBuilder = document.querySelector('body').classList.contains("elementor-editor-active");
const screenSize = window.screen.width >= 1025;
if(window.gsap && window.ScrollTrigger && !eleBuilder && screenSize){
gsap.registerPlugin(ScrollTrigger);
image\_mask();
clearInterval(chck\_if\_gsap\_loaded);
}
}, 500);
&#x200B;
function image\_mask(){
const imageMask = document.querySelector('.elementor-element .circle-mask.elementor-widget-image .elementor-widget-container img');
[gsap.to](https://gsap.to)(imageMask ,{
scrollTrigger: {
trigger: '.start-gsap-mask',
start: '-15% 25%',
end: '25% 25%',
scrub:1
},
webkitMaskSize: 70 + '%',
duration: 1
});
}
&#x200B;
})();
&#x200B;
</script>

<script src="[https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js](https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js)"></script>

<script src="[https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollTrigger.min.js](https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollTrigger.min.js)"></script>
0 Answers
Related