[ScrollSmoother not Working Vanilla JS]

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.

[ScrollSmoother not Working Vanilla JS]

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.

See the Pen bGQEQXe by shaban-iddrisu (@shaban-iddrisu) on CodePen

[Auto Play GSAP Slider]

@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);

 

[ProgressBar with GSAP's Draggable]

@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.

[ProgressBar with GSAP's Draggable]

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.

See the Pen MWoQvKq by shaban-iddrisu (@shaban-iddrisu) on CodePen

[Custom Smooth Scroll with ScrollTrigger Pin and ScrollerProxy]

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]

Hello People.

 

Can I get some help on this please.

Thank you!

[Custom Smooth Scroll with ScrollTrigger Pin and ScrollerProxy]

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!

See the Pen rNjXYwb by shaban-iddrisu (@shaban-iddrisu) on CodePen

[Using Draggable Plugin for Horizontal Scroll on WebGL Image Gallery]

@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.

[Using Draggable Plugin for Horizontal Scroll on WebGL Image Gallery]

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!

[Using Draggable Plugin for Horizontal Scroll on WebGL Image Gallery]

@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!

[Using Draggable Plugin for Horizontal Scroll on WebGL Image Gallery]

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.

[Using Draggable Plugin for Horizontal Scroll on WebGL Image Gallery]

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!

See the Pen ExZGXvp?editors=0010 by shaban-iddrisu (@shaban-iddrisu) on CodePen

[ScrollTrigger.scrollerProxy() not working – Smooth ScrollBar]

@akapowl

 

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

[ScrollTrigger.scrollerProxy() not working – Smooth ScrollBar]

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!

See the Pen jOMLWay by shaban-iddrisu (@shaban-iddrisu) on CodePen

[Auto Play GSAP Slider]

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!

[Auto Play GSAP Slider]

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!
 

See the Pen OJRMQBx by shaban-iddrisu (@shaban-iddrisu) on CodePen