can't get ScrollTo plugin to work on a horizontal scroll

[shibz]

i only started using gsap recently, i wanted to use the ScrollTo plugin to animate a horizontal scroll via buttons. but i can't make it work i don't know what the issue is :'((

 

gsap.registerPlugin(ScrollToPlugin);


const avis1 = document.getElementById('avis1');
const avis2 = document.getElementById('avis2');
const avis3 = document.getElementById('avis3');

const b1_2 = document.getElementById('b1_2');
const b2_3 = document.getElementById('b2_3');
const b2_1 = document.getElementById('b2_1');
const b3_2 = document.getElementById('b3_2');

b1_2.addEventListener("click", () => scrollAvis(avis1, avis2));
b2_3.addEventListener("click", () => scrollAvis(avis2, avis3));
b2_1.addEventListener("click", () => scrollAvis(avis2, avis1));
b3_2.addEventListener("click", () => scrollAvis(avis3, avis2));

function scrollAvis(container,targetElement){

    // console.log(targetElement.offsetLeft);
    // console.log(container.offsetLeft);
    gsap.to( container,{
        scrollTo: {
            x: targetElement
        },
        duration: 0.5,
        ease: "power3.out"
    });
    // console.log(targetElement.offsetLeft);
    // console.log(container.offsetLeft);
}

 

any kind of help is appreciated

See the Pen LYavyNg by shibzzz (@shibzzz) on CodePen

[Rodrigo]

Hi,

 

isn't this the same question as this thread's:

 

I believe @mvaneijgen already explained and solved the issue in that thread, right?

[mvaneijgen]

Yeah, better to just keep posting on the same topic, this is confusing. It is better to follow up on the same topic, so we as moderators can follow the progress.

 

This is an edge case, but a really important one. When creating interactive elements some elements can get priority over others, so in this case you have a button with an image in it, the browser knows a button is interactive, so it will take priority over the image and you had set the id on which you target your javascript on the <img>, so nothing would happen. The browser sees you click on the <button> element so it will negate the clicking on the <img>

 

Nobody is forcing you, but it is best when you create buttons to create the interactivity on the <button> it self. This has btw nothing to do with GSAP and is just browsers/Javascipt. 

 

Also, you're still targeting the wrong container .avis__sur-3s is the element with the scroll bar, so that is what you need to set as the gsap.to() element, otherwise thing will scroll. Hope it helps and happy tweening! 

 

See the Pen yLwrjOB?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[shibz]

thank you so much @mvaneijgen , it is now fully working.

 

btw in the codepen example,  i added the buttons to have something to show in the images locations cause they are stored locally, there are probably better alternatives to what i tried but it was the first thing that came into mind. thans again you saved my day good sir. have a great day :))