Jump to content
GreenSock

Jo Mourad

Draggable multiple sections on same page conflict

Go to solution Solved by Jo Mourad,

Recommended Posts

Hello,

 

i was able to create a draggable before after logo reveal!

 

However, i need to add a second one on the same page. When i do that, they both work but one updates the other, sort of.. 

 

You can see the working example here:

 

https://idylliq.ca/portfolio/faucon/

 

And here is my code:

 

gsap.utils.toArray('.section-avant-apres').forEach((section, i) => {


	if (window.matchMedia("(max-width: 689px)").matches) {
		gsap.set(".dragger", {x:"50"})
	} else {
		gsap.set(".dragger", {x:"450"})
	}

	Draggable.create(".dragger", {
		type:"x",
		bounds:".logo-new",
		onDrag: function() {
		let x =  gsap.getProperty(this.target, "x")
		gsap.set(".logo-old", {clipPath: `inset(0px 0px 0px ${x}px)`})
	}
	})
	
});

i'm hoping just by looking at the javascript, you'll know whats wrong...

 

Thanks!

Link to comment
Share on other sites

Looks like you're targeting all elements with the .dragger class in each iteration of the loop. You'll want to target the specific .dragger in each section like this:

 

let yourTarget = section.querySelector(".dragger");

Then set() the target and create a Draggable for the target rather than the .dragger class. 

 

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

PointC Sounds logic. However, being a bit new at all this, i'm confused for the set() part you're referring to.

 

gsap.utils.toArray('.section-avant-apres').forEach((section, i) => {

	let myTarget = section.querySelector(".dragger");

	Draggable.create(myTarget, {
		type:"x",
		bounds:".logo-new",
		onDrag: function() {
		let x =  gsap.getProperty(this.target, "x")
		gsap.set(".logo-old", {clipPath: `inset(0px 0px 0px ${x}px)`})
	}
	})
	
});

This probably makes NO sense LOL... but again, i'm new to this..

 

Link to comment
Share on other sites

I just meant the x position set() in your matchMedia query. So your original code would look like:

 

gsap.utils.toArray(".section-avant-apres").forEach((section, i) => {
  let theTarget = section.querySelector(".dragger")
  if (window.matchMedia("(max-width: 689px)").matches) {
    gsap.set(theTarget, { x: "50" });
  } else {
    gsap.set(theTarget, { x: "450" });
  }

  Draggable.create(theTarget, {
    type: "x",
    bounds: ".logo-new",
    onDrag: function () {
      let x = gsap.getProperty(this.target, "x");
      gsap.set(".logo-old", { clipPath: `inset(0px 0px 0px ${x}px)` });
    }
  });
});

Happy tweening.

  • Like 3
Link to comment
Share on other sites

PS You can:

//switch this
let x = gsap.getProperty(this.target, "x");

//to this
let x = this.x;

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

  • Solution

PointC thanks for the quick replys. Ok so that's what i thought as well! i tried it, and well this code is online right now... i don't know if you see the two sections on the url i sent earlier, but what happens is that ony of the draggers you use works just fine. Then, when you scroll to the next one, it looks as the clipPath is updating on both, and right when you move the .... I JUST GOT IT.

 

haha.. the problem was 

gsap.set(".logo-old", { clipPath: `inset(0px 0px 0px ${x}px)` });

has to be

let clipper = section.querySelector(".logo-old")

gsap.set(clipper, { clipPath: `inset(0px 0px 0px ${x}px)` });

!!!

 

Thanks for all the help!

  • Like 3
Link to comment
Share on other sites

Bingo! Good job figuring it out. :)

 

Glad to hear it's all working now. Happy tweening and thanks for being a Club member.

  • Like 4
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.
×