Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
alecosta

ScrollTrigger, how to play a tween on horizontal scroll

Recommended Posts

Hello,

I have some divs that scroll horizontally. I want to start an animation when the div id="three" appears on the screen, but I think that something is wrong in my code.

Please help!

See the Pen zYBvLRV by alessandro-costa (@alessandro-costa) on CodePen

Link to post
Share on other sites

 

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 ExyVdWE 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 post
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 !

Link to post
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.

×