Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Shaban Iddrisu™

  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

238 profile views

Shaban Iddrisu™'s Achievements

  1. @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);
  2. @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.
  3. 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.
  4. 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.
  5. Hello People. Can I get some help on this please. Thank you!
  6. 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!
  7. @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.
  8. 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!
  9. @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!
  10. 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.
  11. 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!
  12. @akapowl Thank you very much for the direction. I am very grateful.
  13. 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!
  14. 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!
  15. 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!