first time using gsap

[shibz]

i'm trying to make a horizontal scroll (on x axes) but it doesn't seem to work

 

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){
    gsap.to(container, {
        scrollLeft: targetElement.offsetLeft, 
        duration: 0.5,
        ease: "power3.out" });
    console.log("excecuted");
}

could i get a little help please?

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

[mvaneijgen]

Hi @shibz welcome to the forum!

 

There are no elements with the id #b1_2 in your html, I've hooked up a random button to the javascript to click on. There is also no container defined, so I've set this to .avis__sur-3s, so indeed your demo would do nothing, because everything you target doesn't exist. 

 

I've never used scrollLeft, but I would use our ScrollTo plugin https://gsap.com/docs/v3/Plugins/ScrollToPlugin?_highlight=scrollto, this allows you to get much more control and you can just target the element directly and GSAP will calculate an offset. 

 

Also highly recommend using the latest versions of the plugins you were loading version 3.9 and where are currently at version 3.12.5 I've set it to load in the Javascript settings panel in codepen. 

 

Hope it helps and happy tweening! 

 

See the Pen qBvwmVL?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

[shibz]

1 hour ago, mvaneijgen said:

Hi @shibz welcome to the forum!

 

There are no elements with the id #b1_2 in your html, I've hooked up a random button to the javascript to click on. There is also no container defined, so I've set this to .avis__sur-3s, so indeed your demo would do nothing, because everything you target doesn't exist. 

 

I've never used scrollLeft, but I would use our ScrollTo plugin https://gsap.com/docs/v3/Plugins/ScrollToPlugin?_highlight=scrollto, this allows you to get much more control and you can just target the element directly and GSAP will calculate an offset. 

 

Also highly recommend using the latest versions of the plugins you were loading version 3.9 and where are currently at version 3.12.5 I've set it to load in the Javascript settings panel in codepen. 

 

Hope it helps and happy tweening! 

 

 

 

thank you so much for your answer, i realize that whilste replacing the image links by random icons i accidently deleted some lines. i have updated the code snippet, however i will update my gsap version and try using the ScrollTo plugin as well.

 

happy tweening :))