Jump to content
Search Community

shibz

Members
  • Posts

    4
  • Joined

  • Last visited

About shibz

  • Birthday February 10

shibz's Achievements

  1. 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 :))
  2. 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
  3. shibz

    first time using gsap

    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 :))
  4. 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?
×
×
  • Create New...