How to implement with GSAP ScrollTrigger

[ashehzadgec]

How to implement with GSAP ScrollTrigger

[TomasShaggy]

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 ***@***.***> 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 <#118 (comment)>, 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: c5dffd6

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 ***@***.***> wrote: Sorry for the delay in answering here. I've uploaded a new demo which uses GSAP ScrollTrigger: c5dffd6 <c5dffd6> 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 <#118 (comment)>, 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 ***@***.***> 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 ***@***.***> wrote: > Sorry for the delay in answering here. > I've uploaded a new demo which uses GSAP ScrollTrigger: c5dffd6 > <c5dffd6> > > 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 > <#118 (comment)>, > 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 ***@***.***> 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 ***@***.***> 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 ***@***.***> > wrote: > >> Sorry for the delay in answering here. >> I've uploaded a new demo which uses GSAP ScrollTrigger: c5dffd6 >> <c5dffd6> >> >> 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 >> <#118 (comment)>, >> 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 ***@***.***> 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 <#118 (comment)>, 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 ***@***.***> 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 ***@***.***> 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 > <#118 (comment)>, > 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 ***@***.***> 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 <#118 (comment)>, 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 ***@***.***> 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 ***@***.***> 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 > <#118 (comment)>, > 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 ***@***.***> 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 ***@***.***> 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 ***@***.***> > 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 >> <#118 (comment)>, >> 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 ***@***.***> 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 <#118 (comment)>, 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 > <#118 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/APQYRBUIUVMBIHTSOKWHADTTCS2O3ANCNFSM4TWKDIEA> > . >