Jump to content


gsap scrolltrigger horizontal scroll + vertical

Recommended Posts

how to make scroll like this? can you make a simple demo please?

Screenshot 2023-01-30 at 09.42.18.png

Link to comment
Share on other sites


Once you have a proper layout set up, the GSAP side of things could look something like this;


gsap.to(".theContentYouWantToTweenOn", {
  y: () => { return -(document.querySelector('.theContentYouWantToTweenOn').scrollHeight - window.innerHeight) },
  ease: "none",
  scrollTrigger: {
    trigger: ".someWrappingElement",
    start: () => "left left",
    end: () => "+=" + document.querySelector('.theContentYouWantToTweenOn').scrollHeight - window.innerHeight,
    pin: true,
    pinSpacing: true,
    scrub: true,
    horizontal: true,
    invalidateOnRefresh: true


It's pretty much similar to what you can see with fake-horizontal-scrolling tweens in vertical scrolling scenarios, like the one shown below, except for all the x-related values being exchanged with y-related values and vice versa; additionaly you'll want to set horizontal to true on your ScrollTrigger, when you are moving in a native horizontal scrolling environment.


Once you have tried something yourself, we'll be happily helping with the GSAP side of things you tried out and got stuck on - but again, please keep in mind, that these forums are not intended for requests á la 'please give me an example for how to do this effect'.


See the Pen dyvygmj by akapowl (@akapowl) on CodePen


  • Like 2
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.