Shaban Iddrisu™
Premium-
Posts
17 -
Joined
-
Last visited
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by 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.
-
Custom Smooth Scroll with ScrollTrigger Pin and ScrollerProxy
Shaban Iddrisu™ replied to Shaban Iddrisu™'s topic in GSAP
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. -
Custom Smooth Scroll with ScrollTrigger Pin and ScrollerProxy
Shaban Iddrisu™ replied to Shaban Iddrisu™'s topic in GSAP
Hello People. Can I get some help on this please. Thank you! -
Custom Smooth Scroll with ScrollTrigger Pin and ScrollerProxy
Shaban Iddrisu™ posted a topic in GSAP
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! -
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!
-
ScrollTrigger.scrollerProxy() not working – Smooth ScrollBar
Shaban Iddrisu™ replied to Shaban Iddrisu™'s topic in GSAP
@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!
-
Hello @ZachSaucier thank you for re-enforcing my initial thinking to me again. I was able to find a solution by: setInterval(function () { !isTweening() && transition("next", currentStep); }, 2000); Thank you!
-
Hello Everyone. I hope you are doing well today. I have a little issue I am finding difficulty in implementing and I would be very grateful to anyone who may be able to help me. I have recently (a few months ago) started using GSAP and I find it a very robust tool to create stunning animations on the web. For that matter, I purchased a great course online, one that is geared towards "Creating Custom Sliders with GSAP". I have been able to implement the slider, however I am facing a little complication on how to make the slider AUTO PLAY after a set period of time. I figured I need to use the Window setTimeOut() Method but I am not able to identify the right spot to place this function. I posted about this in the course forum, specifically to the Tutor but for some reason I do not know, I didn't receive adequate attention nor help in solving this issue. Kindly take a look at my code and help me sort this out. Thank you!