Shaban Iddrisu™

Hello @Rodrigo Thanks for your response. I confirm adding the ScrollTrigger to my project in CodePen solved the issue; however, NOT in my main project. I did add the ScrollTrigger happily thinking all will be solved and still, the issue kept on. So I did a little digging in my code, and voila..! I have a custom utility called Use. In there, I create almost every reusable functions, variables, components etc to be instantiated anywhere I need it in my projects. Amongst these is the CustomEase setup I have. One of the custom ease functions was my downfall, it is named"expo" which I think is conflicting with some internals of either ScrollTrigger or ScrollSmoother. Here is a link to a video demonstrating the issue. If that's the case, I think users should be aware of this and a feasible solution implemented as soon as possible. Thanks, Regards.

Hello, I have been using ScrollSmoother since it was revealed and I never had any issues with it until now. I am trying to use it in my current project and it is very choppy, sticky and unusable. I tried everything I could to make it work and yet nothing. It is quite strange why I am having this issue. My HTML structure still contains a "#main-wrapper" and a "#scrollable" container. Previously the "#scrollable" was the only child of the "#main-wrapper"; however, now that's not the case because I am removing the current "#main-wrapper" and replacing it with the next "#main-wrapper" on Barba Js page transition. Not only that, now it won't work even on CodePen too. Perhaps I am missing a crucial step, I can't tell; hence, it would be great if you would facilitate me. I have attached a short video recording showing how choppy it is for your reference. Thanks, Regards. ScrollSmoother Choppiness.mp4

@Syed Azam I created an autoplay() function which runs the nextSlide() function. The autoplay() is fired when the slider element is in the viewport. Previously, I was using ScrollTrigger to check when the slider element is in view, however, now I use Intersection Observer to do the checking and run the autoplay(). I also stop the autoplay() with the clearInterval() method when the slider element is not in the viewport as shown in the code below. let autoplay = null; const autoPlaySlide = () => { autoPlay = setInterval(() => { nextSlide(); }, 3000); }; /*------------------------------ Stop Auto Play ------------------------------*/ const stopAutoPlaySlide = () => { clearInterval(autoPlay); }; /*------------------------------ Observer ------------------------------*/ const runObserver = (observe) => { const setActiveElement = (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { autoPlaySlide(); } else { stopAutoPlaySlide(); } }); }; const options = { rootMargin: '0px', threshold: 0.3, }; const observer = new IntersectionObserver(setActiveElement, options); observer.observe(observe); }; runObserver(sliderElement);

@OSUblake & @PointC Thank you very much for your efficient responses. The solutions worked. Much appreciated. @OSUblake would you mind explaining why I should use "minX" and not "maxX"...? Understanding this would be very helpful and add up to my GSAP knowledge. Thanks.

Hello. I hope you are doing well. I have 5 boxes named 001 – 005 which are wrapped in DIV called "List", which is then wrapped in a parent DIV called "Cards". The "List" is the DRAGGABLE element, and the "Cards" DIV serves as the BOUNDS element. The draggable TYPE is "x". The draggable VARS{ } object also contains the following properties, — Inertia, ThrowProps, onDrag and onThrowUpdate. This is a technique I learnt from one of BLAKES CodePen Demos and the setup works as expected. However, I have a PROGRESS INDICATOR with a "Width: 0%". I want to update this to have a "Width: 100%" based on the drag. I followed the process BLAKE used in his CodePen Demo and I am still not getting a VALUE between "0 – 1" where I can then multiply that VALUE by "100" and use it as the "Width" value of the PROGRESS INDICATOR. It would be very much appreciated if I can get some help from here. Thanks.

Hi. This is GSAP specific question. ScrollTrigger is not working well with my smooth scroll. You have videos on ScrollTrigger and Smooth Scroll Bar, I would like to know how that really differs from my topic as well. Nonetheless, I am asking for help specifically not to create a smooth scroll tool (because I have that working) but how to implement get scrollTrigger to work well with my project. All I need is to be directed towards the right path. Thanks.

Hello People. Can I get some help on this please. Thank you!

Hello People. I hope you are doing well. I have recently implemented my own custom smooth scroll using a simple LERP function. It works well with what I am using it for so far – that is making it possible to scroll WebGL elements mixed with the DOM elements synchronously. However, I have not been successful at making it work with scrollTrigger especially when I want to pin stuffs. The positions get throned-off and things just get messy. I think a possible fix will be to incorporate scrollTrigger scrollerProxy in my custom smooth scroll function and I do not know how to do that, hence I would very grateful if you can take a look at my code and help me make my dreams come true ? Thank you!

@OSUblake Thank you very much. I am very grateful. I will go check it out now and try to understand how you've implemented it. Thank you once again.

Hello @OSUblake I hope you are well. This is a courtesy follow up about my petition. Do you think you will be able to help me find a solution today..? Thank you!

@OSUblake Thank you for taking the time to do this for me. It was great of you thinking to keep me informed and busy until you update my pin. Respect!

Hello @OSUblake Thank you for the swift response. Yes, I will like to replace this with Draggable. This way everyone can simple click and drag to enjoy the effect I am trying to achieve. Thank you very much.

Hello People! I hope you are doing well. I have been working on this project using Three.js to render WebGl images, in other words, merging HTML with WebGL. The effect is pretty simple and I have successfully hooked it to window.scrollX to achieve horizontal scroll. Now the challenge is, I am not able to hook this to GSAP's Draggable Plugin to achieve the same however by dragging. I would be very grateful if anyone can help me out thoroughly. Thank you!

@akapowl Thank you very much for the direction. I am very grateful.

Greetings All! I am having a little problem testing out Smooth-ScrollBar with ScrollTrigger. Without any ScrollTrigger based animation, the smooth-scrollbar works as it should. However, with ScrollTrigger implement, the animation does not play. I have added the scrollerProxy() to my code but to no avail. Perhaps I am missing a key snippet my code. Kindly take a look and help me figure this out. Thank you!