Jump to content
Search Community

ScrollTrigger, how to play a tween on horizontal scroll

alecosta test
Moderator Tag

Recommended Posts

 

Hey @alecosta

 

Since you are not using the browser built-in horizontal scrolling, but only 'faking' a horizontal scroll by translating the content on the x-axis, the 'horizontal: true' in combination with your start on that second ScrollTrigger you have, won't work.

 

You'll have to use a 'normal' vertical set up ScrollTrigger, and calculate the start for your tween dependent on the scroll-progress on the y-axis.

 

I did it like so - just for example - in the following pen

 

gsap.to("#three", {
  scrollTrigger: {
        trigger: "body", // elemento oggetto dello scrolltrigger
        start: () => "0 -" + ( document.querySelector("#container").offsetWidth / (formats.length - 1) * 1 ),
        end: () => "+=" + ( document.querySelector("#container").offsetWidth / (formats.length - 1) * 1 ),
        scrub: true,
        //horizontal: true,
    },
    backgroundColor: "#000"
});

 

Also I added an end and a scrub - only to better demonstrate, when the tween begins and when it ends.

 

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

 

 

Edit (Just in case of a possible follow up question)

If your container is positioned somewhere further down on the page with content above it, you would of course have to calculate in the scroll-position / scrollTop into your start-point for that ScrollTrigger.

 

 

Hope this helps.

Cheers,

Paul

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

6 hours ago, akapowl said:

 

Hey @alecosta

 

Since you are not using the browser built-in horizontal scrolling, but only 'faking' a horizontal scroll by translating the content on the x-axis, the 'horizontal: true' in combination with your start on that second ScrollTrigger you have, won't work.

 

You'll have to use a 'normal' vertical set up ScrollTrigger, and calculate the start for your tween dependent on the scroll-progress on the y-axis.

 

I did it like so - just for example - in the following pen

 


gsap.to("#three", {
  scrollTrigger: {
        trigger: "body", // elemento oggetto dello scrolltrigger
        start: () => "0 -" + ( document.querySelector("#container").offsetWidth / (formats.length - 1) * 1 ),
        end: () => "+=" + ( document.querySelector("#container").offsetWidth / (formats.length - 1) * 1 ),
        scrub: true,
        //horizontal: true,
    },
    backgroundColor: "#000"
});

 

Also I added an end and a scrub - only to better demonstrate, when the tween begins and when it ends.

 

 

 

 

 

Edit (Just in case of a possible follow up question)

If your container is positioned somewhere further down on the page with content above it, you would of course have to calculate in the scroll-position / scrollTop into your start-point for that ScrollTrigger.

 

 

Hope this helps.

Cheers,

Paul

 

Thank you so much, @akapowl !

  • Like 1
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.
×
×
  • Create New...