Jump to content
GreenSock

PSMAyhan

scrollTo not working with ScrollTrigger on a horizontal webpage

Go to solution Solved by Rodrigo,

Recommended Posts

I have a horizontal webpage and I wanted to implement a rowjumper.
However, gsap.scrollTo() doesn't seem to work together with ScrollTrigger on a horizontal webpage.

 

Does anyone know how I can implement this rowjumper?

 

I'm happy about any help

 

 

See the Pen PoeyvPQ?editors=1010 by PSM-Ayhan (@PSM-Ayhan) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

Hi @PSMAyhan and welcome to the GreenSock forums!

 

The ScrllTo Plugin is doing exactly what is supposed to do, the problem is that the top position of all your sections is zero, hence the scroll bar doesn't move a single pixel.

 

Since you are implementing a horizontal animation, based on a vertical scrolling page, the best approach is to get a scroll amount for each section. Also is critical in this type of setup that the animation that moves the content horizontally has a linear ease, otherwise getting the right values for the scroll position of each section can become quite a difficult task. This seems to do what you're after:

const wrapper = document.querySelector(".wrapper")
const move = (wrapper.offsetWidth - document.body.offsetWidth) * -1
const links = gsap.utils.toArray(document.querySelectorAll("a"))

const scrollPerLink = (document.body.clientHeight - window.innerHeight) / (links.length - 1);

links.forEach((link, index) => {
  link.addEventListener("click", function() {
    gsap.to(window, {
      duration: .5,
      scrollTo: (scrollPerLink * index),
    })
  })
})


gsap.to(wrapper, {
  scrollTrigger: {
    scrub: 1,
  },
  x: move,
  ease: "none", // <- NO EASING, SUPER IMPORTANT
});

Finally if you're looking for some complex animations on each panel you can use the Container Animation feature:

See the Pen WNjaxKp by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!

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.
×