Ghandor Posted May 9, 2021 Share Posted May 9, 2021 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: See the Pen WNoJPor by snorkltv (@snorkltv) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted May 10, 2021 Share Posted May 10, 2021 Here's the trick to making anything responsive. Keep track of everything as ratio i.e. a percentage. Some might call that a normalized value. So if x is at 200 and the image width is 1000, then the ratio is 0.2. Now if the image resizes to 500, you can set the draggable to 0.2 of 500 which would be 100. 3 Link to comment Share on other sites More sharing options...
OSUblake Posted May 10, 2021 Share Posted May 10, 2021 quicky example... See the Pen 4d6a0d9caeae1dc5b00387b9b531ba12 by osublake (@osublake) on CodePen 4 Link to comment Share on other sites More sharing options...
Ghandor Posted May 10, 2021 Author Share Posted May 10, 2021 I was walking on dark paths and you showed me the way into the light - thank you so much! See also: 2 Link to comment Share on other sites More sharing options...
Berta Posted May 18, 2021 Share Posted May 18, 2021 Hi there, great solution. But unfortunately there’s a problem when I use more than one image-slider. In my implementation, every image-slider should have the same html-classes applied to it. An obvious solution would be to use „gsap.utils.toArray“, but I have no idea how to add this to the image-slider code. Does anyone have an idea how to solve this? Link to comment Share on other sites More sharing options...
OSUblake Posted May 18, 2021 Share Posted May 18, 2021 Do you have any code to share? A minimal demo would help. It should be a simple as putting all the creation code in a function, calling that function for every slider, and selecting the correct elements in that function, like with element.querySelector. https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector 1 Link to comment Share on other sites More sharing options...
OSUblake Posted May 18, 2021 Share Posted May 18, 2021 gsap.utils.toArray(".gallery").forEach(createSlider); function createSlider(galleryElement) { const draggerElement = galleryElement.querySelector(".dragger"); ... const draggable = new Draggable(draggerElement, { type: "x", bounds: galleryElement, onDrag: onDrag }); ... } 1 1 Link to comment Share on other sites More sharing options...
Berta Posted May 19, 2021 Share Posted May 19, 2021 Great, it works. Thank you! Link to comment Share on other sites More sharing options...
HeatherMA Posted September 16, 2022 Share Posted September 16, 2022 Hiya I also wanted to create this image reveal and have it working responsively using the code you supplied above. I saw the video by Snorkl.tv which implied that this could be used with the inertia plugin so I went ahead and bought the shocking green subscription and installed the plugin. Unfortunately it doesn't work. Am I missing something here? All I did was add inertia:true to the draggable element. Any help much appreciated! Thanks Link to comment Share on other sites More sharing options...
Rodrigo Posted September 16, 2022 Share Posted September 16, 2022 Hi @HeatherMA, Can you please provide a codepen example that we can take a look at? Thank you for supporting GSAP by becoming a Club member 🎉 Happy Tweening!!! Link to comment Share on other sites More sharing options...
Rodrigo Posted September 16, 2022 Share Posted September 16, 2022 @HeatherMA, Changing this in the example by @OSUblake seems to work: const draggable = new Draggable(".dragger", { type: "x", bounds: ".gallery", onDrag: onDrag, onThrowUpdate: onDrag, throwResistance: 2000, inertia: true, }); Is this what you're trying to achieve? See the Pen RwypaJP by rhernando (@rhernando) on CodePen Happy Tweening!!! 1 Link to comment Share on other sites More sharing options...
HeatherMA Posted September 16, 2022 Share Posted September 16, 2022 Yes that did it! thanks so much 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now