Ghandor

I was walking on dark paths and you showed me the way into the light - thank you so much! See also:

I'm trying to adapt the example given below or a similar approach for responsive images/elements with 100% width and automatic height. I try it in this way: (function ($) { let w = 0; $(window).on('load', function () { let width = $('.gallery').outerWidth(); let w = $(window).width(); gsap.to(".gallery", {autoAlpha: 1}); gsap.set(".dragger", {x: width / 2}); Draggable.create(".dragger", { type: "x", bounds: ".gallery", onDrag: function () { let x = width - gsap.getProperty(this.target, "x"); gsap.set(".clipped", {clipPath: `inset(0px ${x}px 0px 0px)`}); } }); }); window.addEventListener('resize', function () { if (w !== $(window).width()) { // n/a } }); }); My main problem is that "Dragger" and "clipPath" are no longer displayed "congruent/synchronous" when the viewport is changed. I have "deltaX" or "update()" in mind - but unfortunately can't come to a solution. Does anyone have an idea about this? BTW: Is there perhaps a more elegant method than my code above? Original approach from snorkltv: