Shehzad Asif

Hi Zach Here I go. You are awesome man and gsap too. Thanks a lot for the amazing support always.

Hi There I am observing a wired issue with pinning. The thing is text pinning should end when the container height ends but it scrolls beyond its height and join next container text and then leave pinning. I tested it by putting "+=100%" and other functions like "container scroll height and endTrigger" but same issue. What I am trying to achieve is that text should leave pinning when it comes to the top/ center of last image of each container through single tween. What I am missing?.

Hy Zach So far, I do not know. That's why I was asking for help.

Hy There If anyone already implemented or can implement the above mentioned smooth scroll library with scrolltrigger. Pls share here. I thinks it is the best library for smooth scroll purpose as it provides the perfect balance between regular smooth scroll like asscroll and locomotive. Demo section of the library can explain better what I am saying. Or Zach as you are the master of GSAP. It would be awesome if you can do this from your busy schedule. I am also working on it but got stuck with pinning not working and animation triggers a bit before the target viewport. Regards, Shehzad Asif

Hy All, As Zach guided towards applying css property "will-change:transform". And I did the same for locomotive while set the lerp between 0.07-0.08 (you can play with lerp value to your liking mine is 0.08). It will remove the flickering of elements up-to like you will barely feel it. Hope it will be helpful. Point to be noted here is if you use "data-scroll-section" data-attribute for each section on the page then above solution will not work. This solution works on "locomotive and smooth-scrollbar (1st & 2nd demo on scroller proxy page). It's not working for asscroll but for most smooth scroll libraries it will work as per my testing. Happy smooth scrolling. Regards, Shehzad Asif

Sure

@akapowl. Thanks for the video. @zach. I tried asscroll, locomotive and virtual scroll or even javascript and gsap smooth scroll but all with same issue. There must be a solution to this. I saw some websites with smooth scroll and without flickering even on chromium based browsers(alitwotimes website is a great example). Wondering how they controlled it?

@akapowl. You got it man. Yes I am talking about text, border and peaches flickering. Exactly.

Hy there The subject may not directly related to gsap but I am curious to know is there any way to solve it. The problem is when you use smooth scroll like the codepen demo, when you start scrolling you will notice that text flickers (like moving up and down when scroll ends). Is there any way to solve this flickering. Regards, Shehzad Asif

HY Zach As far as CDN link of library related to your site, I took it from gsap forum while searching for the same issue. I always search on the forum or internet before posting the question here. In your demo you are using the right library that I am using but smooth scroll is not working in your demo. If you change the class of "scroller" with "vs-section" respectively at all places then smooth scroll will work (just like my demo) but scroll trigger and pinning will not work. I hope this makes it clear. Regards, Shehzad Asif

Zach, I updated with CDN and removed the library from code.

Hy Zach You are always available to help out at this amazing gsap forum, thumbs up for that. The more I am getting deep the more I am learning. In my demo I am using "https://github.com/baptistebriel/smooth-scrolling" baptistebriel smooth scroll/ virtual scroll as mentioned in my question. I removed the CDN and placed the library into the code to avoid misunderstanding. In your demo you are using another library not related to my demo. Can you please look into it again. Look forward to your reply. Regards, Shehzad Asif

Hy there, I am implementing https://github.com/baptistebriel/smooth-scrolling on my project. But got stuck with "pin not working properly with scroll-trigger". Can anyone help me in this regard. It is one of the crucial part of the project. Regards, Shehzad Asif

Hy Zach I really appreciate your support and help. It would be very kind if you can make a demo for both problems (width revealing effect and parallax image). I followed your guide but could not solve the problem. Can you pls. Regards, Shehzad Asif

Hy There I am on the learning road of gsap and often faces some problems I could not solve myself. Any how the problem is, parallax images works but their start/ end position is not working properly as in the demo, parallax effect stop working before end mark or after start mark. If I do the same thing with some content over background image or with other properties like scaling, fading, these effects totally work fine from top to bottom but if I have only background image or only image it will not work x and y axis from top to bottom As you can see in the demo the image is moving only from the bottom but not from the top. Any help how to do this. Regards, Shehzad Asif

Hy There I am getting an odd behavior when I use transform origin for width from left to get revealing effect from left as you can see in the demo. The problem is on my machine it transforming from center, no matter what transform origin I use. It will reveal the image from center. But in codepen, transform origin works okay but its scaling up and down the image. Can any one help me what I am doing wrong. Regards, Shehzad Asif

Thanks Zach As I am new to gsap and on learning curve, exploring the things. You guys are awesome and ready to help quickly. I really appreciate it and thanks for the quick help to make the code dry. Regards, Shehzad Asif

Hy There I am struggling to assign same timeline with "forEach loop and function" for different elements when they come in viewport. I searched on forum and on google as well but could not find a relevant answer. Is it possible to achieve it or do I have a to write same timeline for every element (that will be a lot of repeat code). Any help will be appreciated. Regards Shehzad Asif

Thanks a lot for your help.

Hy ZachSaucier, Thanks for your quick and prompt response and to provide solution to my problem. I really appreciate. One thing I did after reading your reply (as you mentioned it does not work with "href="#id") it clicked my mind and I decided to give it a try and removed the "href" links from navs. It worked even without putting any extra code. I revised my demo linked above (just removed the "href" links from nav, nothing else). What do you think. It may be helpful to others. Regards, Shehzad Asif

Hy there, I am new to GSAP. The problem is I want my navigation to be fixed on top. I am using asscroll smooth scroll with GSAP + ScrollTrigger + ScrollToPlugin. The problem is, if I put navigation outside smooth scroll container then position fix works but anchors link does not work correctly. If I put navigation inside smooth scroll container then fix position does not work but anchors link work correctly. Pls have a look at the codepen for better under standing. Just move the navigation inside or outside of the asscroll-container to see the problem. I tried my best to get the solution but could not come up with it. I really look forward to you guys if any one could help me out. Regards, Shehzad Asif