Jo Mourad Posted January 11, 2022 Share Posted January 11, 2022 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 More sharing options...
PointC Posted January 11, 2022 Share Posted January 11, 2022 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. 2 Link to comment Share on other sites More sharing options...
Jo Mourad Posted January 11, 2022 Author Share Posted January 11, 2022 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 More sharing options...
PointC Posted January 11, 2022 Share Posted January 11, 2022 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. 3 Link to comment Share on other sites More sharing options...
PointC Posted January 11, 2022 Share Posted January 11, 2022 PS You can: //switch this let x = gsap.getProperty(this.target, "x"); //to this let x = this.x; Happy tweening. 2 Link to comment Share on other sites More sharing options...
Solution Jo Mourad Posted January 11, 2022 Author Solution Share Posted January 11, 2022 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! 3 Link to comment Share on other sites More sharing options...
PointC Posted January 11, 2022 Share Posted January 11, 2022 Bingo! Good job figuring it out. Glad to hear it's all working now. Happy tweening and thanks for being a Club member. 4 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