Jump to content
Search Community

Responsive Draggable Image Comparison

Ghandor test
Moderator Tag

Recommended Posts

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

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.

 

 

  • Like 3
Link to comment
Share on other sites

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

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
  });
  
  ...
}

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

  • 1 year later...

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

@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!!!

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...