How to implement with GSAP ScrollTrigger

[ashehzadgec]

Hy there

Recently I started to work with GSAP due to its ease and super power. And I love your library due to the way it handles the smooth scroll. I think it's a perfect balance between regular smooth scroll and locomotive scroll. I am trying to make it work with GSAP scrolltrigger.I tried different techniques as mentioned here "https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy" but could not come up with a proper solution. Can you pls help me how to implement it with scrolltrigger.

Regards Shehzad Asif

[hahajska]

Hey, did u figure it out please? if yes, pls let me know

[ashehzadgec]

Hi

Thanks for the even late reply. I tried different things but could not get it working 100% some hits and misses. Yes, I did not get it working with gsap. I will really appreciate it if you could help me in this regard. Bcs I really want to use this amazing library for the best of both worlds as it sits perfectly between regular scroll and locomotive scroll (like it is not slow and not too jumpy, a perfect balance of both worlds).

Regards, Shehzad Asif

On Sat, Feb 27, 2021 at 10:20 PM Tomáš Schlögl notifications@github.com wrote:

Hey, did u figure it out please? if yes, pls let me know

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/baptistebriel/smooth-scrolling/issues/118#issuecomment-787105453, or unsubscribe https://github.com/notifications/unsubscribe-auth/APQYRBQLPMCUTSIZGQVN7ZLTBESXNANCNFSM4TWKDIEA .

[baptistebriel]

Sorry for the delay in answering here. I've uploaded a new demo which uses GSAP ScrollTrigger: https://github.com/baptistebriel/smooth-scrolling/commit/c5dffd6e40198ac9631df100689a3c338cd24ff6

It should work on both native: true and native: false versions. Basically ScrollTrigger needs to know which property is the scrollTop value within the module (scroll.vars.target or scroll.vars.current) and a method to tell ScrollTrigger to update.

To run the demo examples, simply clone/download the repository and start http-server within the root folder on your terminal. Let me know if that helps and if you're having any issues!

[ashehzadgec]

Hi

Thanks for the demo but it is kind of working but not properly. So I just changed the code a bit to make it work. Wao, now it is working as expected. Below is the code. Pls update the demo in the repository.

The thing is I tested it with scroll trigger and some animations were not happening at the right time and some were happening even before coming into the viewport like when I tried initially. So in your code what I did is just I am calling scrolltrigger.update() and scroll.init() before calling the scrollTrigger animation so keeping it updatie from the very first scroll and before animation is called.

  var scroll = new Smooth({
    native: true,
    preload: true,
    callback: () => {
      ScrollTrigger.update();
    }
  });

  ScrollTrigger.scrollerProxy(scroll.dom.listener, {
    scrollTop(value) {
      return arguments.length ? scroll.scrollTo(value) : scroll.vars.

target; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window .innerHeight }; } });

  scroll.init();

  ScrollTrigger.refresh();

  var images = document.querySelectorAll('img');
  images.forEach((img) => {
    gsap.fromTo(
      img,
      {
        autoAlpha: 0,
        y: 50
      },
      {
        autoAlpha: 1,
        y: 0,
        scrollTrigger: {
          trigger: img,
          start: 'top center',
          end: '+=50%',
          scrub: 1,
          markers: true
        }
      }
    );
  });

On Mon, Mar 1, 2021 at 2:17 PM Baptiste Briel notifications@github.com wrote:

Sorry for the delay in answering here. I've uploaded a new demo which uses GSAP ScrollTrigger: c5dffd6 https://github.com/baptistebriel/smooth-scrolling/commit/c5dffd6e40198ac9631df100689a3c338cd24ff6

It should work on both native: true and native: false versions. Basically ScrollTrigger needs to know which property is the scrollTop value within the module (scroll.vars.target or scroll.vars.current) and a method to tell ScrollTrigger to update.

To run the demo examples, simply clone/download the repository and start http-server https://www.npmjs.com/package/http-server within the root folder on your terminal. Let me know if that helps and if you're having any issues!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/baptistebriel/smooth-scrolling/issues/118#issuecomment-787793630, or unsubscribe https://github.com/notifications/unsubscribe-auth/APQYRBQKBJSWDF6DBQ4JR2LTBNLT7ANCNFSM4TWKDIEA .

[ashehzadgec]

Previous mail was sent accidentally without completion.

In addition to trailing mail, I just can't thank you enough for providing the code for gsap. I tried and searched and waited for it so long. So, finally today it is working and now can implement it into my projects.

Again thank you so much for the kind support and for this amazing library. Always have a good time.

Regards, Shehzad Asif

On Mon, Mar 1, 2021 at 4:56 PM Shehzad ashehzadgec@gmail.com wrote:

Hi

Thanks for the demo but it is kind of working but not properly. So I just changed the code a bit to make it work. Wao, now it is working as expected. Below is the code. Pls update the demo in the repository.

The thing is I tested it with scroll trigger and some animations were not happening at the right time and some were happening even before coming into the viewport like when I tried initially. So in your code what I did is just I am calling scrolltrigger.update() and scroll.init() before calling the scrollTrigger animation so keeping it updatie from the very first scroll and before animation is called.

  var scroll = new Smooth({
    native: true,
    preload: true,
    callback: () => {
      ScrollTrigger.update();
    }
  });

  ScrollTrigger.scrollerProxy(scroll.dom.listener, {
    scrollTop(value) {
      return arguments.length ? scroll.scrollTo(value) : scroll.vars.

target; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }; } });

  scroll.init();

  ScrollTrigger.refresh();

  var images = document.querySelectorAll('img');
  images.forEach((img) => {
    gsap.fromTo(
      img,
      {
        autoAlpha: 0,
        y: 50
      },
      {
        autoAlpha: 1,
        y: 0,
        scrollTrigger: {
          trigger: img,
          start: 'top center',
          end: '+=50%',
          scrub: 1,
          markers: true
        }
      }
    );
  });

On Mon, Mar 1, 2021 at 2:17 PM Baptiste Briel notifications@github.com wrote:

Sorry for the delay in answering here. I've uploaded a new demo which uses GSAP ScrollTrigger: c5dffd6 https://github.com/baptistebriel/smooth-scrolling/commit/c5dffd6e40198ac9631df100689a3c338cd24ff6

It should work on both native: true and native: false versions. Basically ScrollTrigger needs to know which property is the scrollTop value within the module (scroll.vars.target or scroll.vars.current) and a method to tell ScrollTrigger to update.

To run the demo examples, simply clone/download the repository and start http-server https://www.npmjs.com/package/http-server within the root folder on your terminal. Let me know if that helps and if you're having any issues!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/baptistebriel/smooth-scrolling/issues/118#issuecomment-787793630, or unsubscribe https://github.com/notifications/unsubscribe-auth/APQYRBQKBJSWDF6DBQ4JR2LTBNLT7ANCNFSM4TWKDIEA .

[ashehzadgec]

Hi there

I just got another problem with it and it is that:

1- When I pin the elements making the position fixed. It does not work (forgot to test before sending last mail out of excitement). I tried scroller attribute in scrolltrigger as mentioned in gsap documentation but nothing worked. 2- When I use "native: false" markers are not moving and won't be able to debug the animation trigger time.

Can you pls help with this?

Regards Shehzad Asif

On Mon, Mar 1, 2021 at 5:02 PM Shehzad ashehzadgec@gmail.com wrote:

Previous mail was sent accidentally without completion.

In addition to trailing mail, I just can't thank you enough for providing the code for gsap. I tried and searched and waited for it so long. So, finally today it is working and now can implement it into my projects.

Again thank you so much for the kind support and for this amazing library. Always have a good time.

Regards, Shehzad Asif

On Mon, Mar 1, 2021 at 4:56 PM Shehzad ashehzadgec@gmail.com wrote:

Hi

Thanks for the demo but it is kind of working but not properly. So I just changed the code a bit to make it work. Wao, now it is working as expected. Below is the code. Pls update the demo in the repository.

The thing is I tested it with scroll trigger and some animations were not happening at the right time and some were happening even before coming into the viewport like when I tried initially. So in your code what I did is just I am calling scrolltrigger.update() and scroll.init() before calling the scrollTrigger animation so keeping it updatie from the very first scroll and before animation is called.

  var scroll = new Smooth({
    native: true,
    preload: true,
    callback: () => {
      ScrollTrigger.update();
    }
  });

  ScrollTrigger.scrollerProxy(scroll.dom.listener, {
    scrollTop(value) {
      return arguments.length ? scroll.scrollTo(value) : scroll.vars.

target; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }; } });

  scroll.init();

  ScrollTrigger.refresh();

  var images = document.querySelectorAll('img');
  images.forEach((img) => {
    gsap.fromTo(
      img,
      {
        autoAlpha: 0,
        y: 50
      },
      {
        autoAlpha: 1,
        y: 0,
        scrollTrigger: {
          trigger: img,
          start: 'top center',
          end: '+=50%',
          scrub: 1,
          markers: true
        }
      }
    );
  });

On Mon, Mar 1, 2021 at 2:17 PM Baptiste Briel notifications@github.com wrote:

Sorry for the delay in answering here. I've uploaded a new demo which uses GSAP ScrollTrigger: c5dffd6 https://github.com/baptistebriel/smooth-scrolling/commit/c5dffd6e40198ac9631df100689a3c338cd24ff6

It should work on both native: true and native: false versions. Basically ScrollTrigger needs to know which property is the scrollTop value within the module (scroll.vars.target or scroll.vars.current) and a method to tell ScrollTrigger to update.

To run the demo examples, simply clone/download the repository and start http-server https://www.npmjs.com/package/http-server within the root folder on your terminal. Let me know if that helps and if you're having any issues!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/baptistebriel/smooth-scrolling/issues/118#issuecomment-787793630, or unsubscribe https://github.com/notifications/unsubscribe-auth/APQYRBQKBJSWDF6DBQ4JR2LTBNLT7ANCNFSM4TWKDIEA .

[baptistebriel]

Hey @ashehzadgec,

Thanks for providing an update on the demo. Good catch. Your solution fixed it, thanks! I am not sure what the issue is when you "pin elements making the position fixed"?

I've added some code to the demo. Please not that this is a bit of a hack, but again the markers are here just for development purposes. Make sure you remove this code once you go live. I'm basically just moving GSAP's markers inside of the section since there is no scrolling on the element with native: false, so they wouldn't update position once you start scrolling.

Again, sorry about the delay in answering. Happy to hear this helped and you're enjoying the module!

[ashehzadgec]

Thanks for the markers, now they are working as supposed to be. If I got the pin elements working, I will update you.

Thanks for the help.

Regards, Shehzad Asif

On Mon, Mar 1, 2021 at 6:10 PM Baptiste Briel notifications@github.com wrote:

Hey @ashehzadgec https://github.com/ashehzadgec,

Thanks for providing an update on the demo. Good catch. Your solution fixed it, thanks! I am not sure what the issue is when you "pin elements making the position fixed"?

I've added some code to the demo. Please not that this is a bit of a hack, but again the markers are here just for development purposes. Make sure you remove this code once you go live. I'm basically just moving GSAP's markers inside of the section since there is no scrolling on the element with native: false, so they wouldn't update position once you start scrolling.

Again, sorry about the delay in answering. Happy to hear this helped and you're enjoying the module!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/baptistebriel/smooth-scrolling/issues/118#issuecomment-787937205, or unsubscribe https://github.com/notifications/unsubscribe-auth/APQYRBXIARY4ECF4WHOZH3LTBOG4JANCNFSM4TWKDIEA .

[ashehzadgec]

Hi

I contacted with greensock regarding the issue and got the following suggestions:

"Currently you're not using the scroller property of ScrollTrigger that makes the ScrollTrigger use the scroller specified. So your scrollerProxy is not doing anything helpful. Either use the scroller property to specify the scroller and remove the ScrollTrigger.update() call from the smooth scroller callback (like this https://codesandbox.io/s/pin-not-working-forked-kwq7i?file=/src/index.js) or remove the .scrollerProxy() completely. The in-between that you have makes no sense.

My guess is that you will need to do something like what we did with Locomotive Scroll https://cdpn.io/GreenSock/pen/1dc38ca14811bc76e25c4b8c686b653d in handling the pinning in a special way."

I hope it may be helpful to you to solve pinning elements. That's why it is shared but I am still trying to get it to work but not working.

Regards,

Shehzad Asif

On Mon, Mar 1, 2021 at 6:43 PM Shehzad ashehzadgec@gmail.com wrote:

Thanks for the markers, now they are working as supposed to be. If I got the pin elements working, I will update you.

Thanks for the help.

Regards, Shehzad Asif

On Mon, Mar 1, 2021 at 6:10 PM Baptiste Briel notifications@github.com wrote:

Hey @ashehzadgec https://github.com/ashehzadgec,

Thanks for providing an update on the demo. Good catch. Your solution fixed it, thanks! I am not sure what the issue is when you "pin elements making the position fixed"?

I've added some code to the demo. Please not that this is a bit of a hack, but again the markers are here just for development purposes. Make sure you remove this code once you go live. I'm basically just moving GSAP's markers inside of the section since there is no scrolling on the element with native: false, so they wouldn't update position once you start scrolling.

Again, sorry about the delay in answering. Happy to hear this helped and you're enjoying the module!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/baptistebriel/smooth-scrolling/issues/118#issuecomment-787937205, or unsubscribe https://github.com/notifications/unsubscribe-auth/APQYRBXIARY4ECF4WHOZH3LTBOG4JANCNFSM4TWKDIEA .

[baptistebriel]

Hey, seems like we can just completely drop the callback function like the demo they sent. Not sure what is still wrong with this demo? What are you trying to achieve by pinning elements?

[ashehzadgec]

Hi

Thanks for the kind consideration, with pinning I want to make some elements position fixed when they come into the viewport for a certain time that is controlled with gsap "pin attribute" in scrolltrigger instance like you can see in locomotive scroll demo above (2nd link), section get fixed until bar scaling or elements rotation is completed. Similarly I want to pin different elements at certain position at different times in the page. It should work with scrolltrigger with the current configuration like in locomotive but still confused why It is not working, quite strange.

I have an idea what if we listen the scroll instance through the container like in our case it is the ('.vs-section) instead of scroll.dom.listener and then mention it as scroller in scrolltrigger instance or something like that bcs in this way it keep the scroll track and update through this container and may pinning work. I will test and let you know it it works.

Regards, Shehzad Asif

On Tue, Mar 2, 2021 at 1:43 PM Baptiste Briel notifications@github.com wrote:

Hey, seems like we can just completely drop the callback function like the demo they sent. Not sure what is still wrong with this demo? What are you trying to achieve by pinning elements?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/baptistebriel/smooth-scrolling/issues/118#issuecomment-788732559, or unsubscribe https://github.com/notifications/unsubscribe-auth/APQYRBRQHOPJB33KMPHBGVLTBSQLTANCNFSM4TWKDIEA .

[ashehzadgec]

Hi

I tried what I said above but got the same result as before (pin does not work at all).

Regards, Shehzad Asif

On Tue, Mar 2, 2021 at 3:12 PM Shehzad ashehzadgec@gmail.com wrote:

Hi

Thanks for the kind consideration, with pinning I want to make some elements position fixed when they come into the viewport for a certain time that is controlled with gsap "pin attribute" in scrolltrigger instance like you can see in locomotive scroll demo above (2nd link), section get fixed until bar scaling or elements rotation is completed. Similarly I want to pin different elements at certain position at different times in the page. It should work with scrolltrigger with the current configuration like in locomotive but still confused why It is not working, quite strange.

I have an idea what if we listen the scroll instance through the container like in our case it is the ('.vs-section) instead of scroll.dom.listener and then mention it as scroller in scrolltrigger instance or something like that bcs in this way it keep the scroll track and update through this container and may pinning work. I will test and let you know it it works.

Regards, Shehzad Asif

On Tue, Mar 2, 2021 at 1:43 PM Baptiste Briel notifications@github.com wrote:

Hey, seems like we can just completely drop the callback function like the demo they sent. Not sure what is still wrong with this demo? What are you trying to achieve by pinning elements?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/baptistebriel/smooth-scrolling/issues/118#issuecomment-788732559, or unsubscribe https://github.com/notifications/unsubscribe-auth/APQYRBRQHOPJB33KMPHBGVLTBSQLTANCNFSM4TWKDIEA .

[ashehzadgec]

Hi

Did you find a solution? If you do not mind, I think Jesper Landberg ( https://jesperlandberg.dev/) is also using your library with GSAP. You can get some help from him?. I contacted him on twitter but he did not reply back.

Regards, Shehzad Asif

On Tue, Mar 2, 2021 at 8:39 PM Shehzad ashehzadgec@gmail.com wrote:

Hi

I tried what I said above but got the same result as before (pin does not work at all).

Regards, Shehzad Asif

On Tue, Mar 2, 2021 at 3:12 PM Shehzad ashehzadgec@gmail.com wrote:

Hi

Thanks for the kind consideration, with pinning I want to make some elements position fixed when they come into the viewport for a certain time that is controlled with gsap "pin attribute" in scrolltrigger instance like you can see in locomotive scroll demo above (2nd link), section get fixed until bar scaling or elements rotation is completed. Similarly I want to pin different elements at certain position at different times in the page. It should work with scrolltrigger with the current configuration like in locomotive but still confused why It is not working, quite strange.

I have an idea what if we listen the scroll instance through the container like in our case it is the ('.vs-section) instead of scroll.dom.listener and then mention it as scroller in scrolltrigger instance or something like that bcs in this way it keep the scroll track and update through this container and may pinning work. I will test and let you know it it works.

Regards, Shehzad Asif

On Tue, Mar 2, 2021 at 1:43 PM Baptiste Briel notifications@github.com wrote:

Hey, seems like we can just completely drop the callback function like the demo they sent. Not sure what is still wrong with this demo? What are you trying to achieve by pinning elements?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/baptistebriel/smooth-scrolling/issues/118#issuecomment-788732559, or unsubscribe https://github.com/notifications/unsubscribe-auth/APQYRBRQHOPJB33KMPHBGVLTBSQLTANCNFSM4TWKDIEA .

[sbtly]

I also want to use GSAP ScrollTrigger with pin: true option with this library.

[baptistebriel]

Hey guys, I haven't had the chance to look it up as I'm currently busy with client work. I'll have a look when I get the chance.

[ashehzadgec]

Thanks a lot for your kind consideration.

Regards, Shehzad Asif

On Mon, Mar 8, 2021 at 4:47 PM Baptiste Briel notifications@github.com wrote:

Hey guys, I haven't had the chance to look it up as I'm currently busy with client work. I'll have a look when I get the chance.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/baptistebriel/smooth-scrolling/issues/118#issuecomment-792702099, or unsubscribe https://github.com/notifications/unsubscribe-auth/APQYRBUIUVMBIHTSOKWHADTTCS2O3ANCNFSM4TWKDIEA .

[ashehzadgec]

Hi,

I hope you are doing well. Sorry to bother you but I just wanted to know that can we use pin function of gsap with this library?

On Mon, Mar 8, 2021 at 10:15 PM Shehzad @.***> wrote:

Thanks a lot for your kind consideration.

Regards, Shehzad Asif

On Mon, Mar 8, 2021 at 4:47 PM Baptiste Briel @.***> wrote:

Hey guys, I haven't had the chance to look it up as I'm currently busy with client work. I'll have a look when I get the chance.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/baptistebriel/smooth-scrolling/issues/118#issuecomment-792702099, or unsubscribe https://github.com/notifications/unsubscribe-auth/APQYRBUIUVMBIHTSOKWHADTTCS2O3ANCNFSM4TWKDIEA .