Draggable & Scrollable flickering

[Nick.Ls]

Hi everyone!

 

My setup is supposed to be easy. A container that will be populated by images, boxes in my situation that needs to be scrollable and draggable. Each scroll or drag should move by one box. So far I have created the animation that I want but I am facing with two problems.

 

The first one is that on drag there is a small flickering in the animation and the second problem is that when I scroll inside the container I get the window scrolled also which is not right.

 

Any suggestions are very welcomed! 

 

Thank you.

See the Pen BabGyKz by Nick_Ls (@Nick_Ls) on CodePen

[Rodrigo]

Hi,

 

For the flickering, the issue is that the onDragEnd callback is interfering with the snap values you're passing. If I was you I'd use one or the other but not both and honestly I'd lean towards using just snap, since the Inertia Plugin would do all the math and heavy lifting for you:

var dragMe = Draggable.create(container, {
  type: "y",
  edgeResistance: 1,
  dragResistance: 0.5,
  // No need for this with snap IMHO
  // onDragEnd: slideAnim,
  throwProps: true,
  inertia: true,
  snap: offsets,
  bounds: "#scrollContainer"
});

As for the wheel event just use preventDefault() there:

function slideAnim(e) {
  oldSlide = activeSlide;

  // Determine the direction of the scroll/drag and adjust activeSlide accordingly
  if (e.type === "wheel") {
    // Here
    e.preventDefault();
    activeSlide = e.deltaY > 0 ? (activeSlide += 1) : (activeSlide -= 1);
  }
}

 

Hopefully this helps.

Happy Tweening!

[Nick.Ls]

33 minutes ago, Rodrigo said:

e.preventDefault();

Thanks for the quick reply @Rodrigo!

Indeed inertia only removes the flickering as you mentioned! Thanks for that... Although I got to figure a way to drag only one item each time. Got any  ideas on that? Maybe with dragDistance calculations? Not sure yet...

As for preventDefault, you are correct on that too but in my live case scenario I also use scrollsmoother where it complicates things and as I see it does not work. Any similar solution for scrollsmoother?

Thanks again!
 

[Rodrigo]

Hi,

 

I believe that the ScrollSmoother issue is more related to something else in your setup, here is a fork of your demo using that approach and the preventDefault approach seems to work the way you intend:

See the Pen MWxzppQ by GreenSock (@GreenSock) on CodePen

 

As for reducing the amount of items, you could play as well with the throwResistance config:

throwResistance : Number - A number (1000 by default) that controls how much resistance or friction there is when the mouse/touch is released and momentum-based motion is enabled (by setting inertia: true). The larger the number, the more resistance and the quicker the motion decelerates. (requires InertiaPlugin and setting inertia: true, otherwise throwResistance will simply be ignored.)

 

I'm pretty sure that there is a way to achieve this with code, but I can't think of one right off the top of my head. The easiest option is to drop inertia and just use the onDragEnd callback to move one element at a time, which is worth noticing that in your demo is not doing much. If I comment out the snap section and the inertia config and leave the onDragEnd callback, nothing actually happens, so you might want to check that 

 

Hopefully this helps.

Happy Tweening!

[Nick.Ls]

Hi @Rodrigo!

 

Great help so far! Love you all and love GSAP !!!

 

Your comments have helped me in a  lot! I have updated my codepen accordingly to your notes, I also used scrollsmoother to my setup as it should be.

Inertia + throwResistance did the trick too.

Additionally I have given my full setup as is in my demo website, including navigation and progress bar. 

 

Regarding your comment on the dragEnd function, I updated the function to accommodate the wheel animation and removed the onDrag event from it since it was indeed not needed. I need the function generally in order to update the indexes and progress as you may see now.

 

The weird thing is that I am still getting the window scroll along with the container scroll in my website although it works in the codepen so I believe I'll have to break it down or start over on that to troubleshoot further. Unless you have any other suggestion on that...

And another weird thing is that in my website, using the exact same code as codepen I can't drag back to item 1. I can scroll it, I can get there through the nav but can't drag back to that... I've been trying for hours and hours to understand why but still can't figure it out... I think I am going to redo that too...

 

In case you see any mistakes in the code so far please do let me know!

[Nick.Ls]

7 hours ago, Nick.Ls said:

And another weird thing is that in my website, using the exact same code as codepen I can't drag back to item 1. I can scroll it, I can get there through the nav but can't drag back to that... I've been trying for hours and hours to understand why but still can't figure it out... I think I am going to redo that too...

 

I figured out that the inertia plugin is preventing me to drag back to item 1 for some reason... but as I said only happens to my demo website for some reason and can't replicate the effect on codepen.

[Rodrigo]

Hi,

 

I tried the same code of this demo in my local environment and is working in the exact same way as it does on Codepen:

See the Pen MWxzppQ by GreenSock (@GreenSock) on CodePen

 

There must be something else in your project interfering with the behaviour you're expecting. Unfortunately without something we can see and tinker with there is not a lot we can do to help.

 

In fact here is the debug link that doesn't have any iframes or any of the extra stuff codepen adds to the editor and previews:

https://cdpn.io/pen/debug/MWxzppQ

 

As you can see is pretty much like a regular webpage if you inspect the HTML in devtools, so that is also another indication that the issue lays somewhere else in your project.

 

Sorry I can't be of more assistance 😞

Happy Tweening!

[Nick.Ls]

Hi @Rodrigo,

 

Thank you once again for your time and effort. Great character of your behalf and really appreciate it!

Amazing community I have to say once more and is a great pleasure to be part of it!

On to the task, it seems that CSS is preventing from correct render of things... I've just found out after breaking it down 100 times that some of the elements need a specific height or CSS alteration in general to work, even if I change it through JS afterwards to match my design needs. If anyone stumbles upon my codepen in the future let me know if you face any problems and I will help you out.

The only problem that still exists is the windows scroll along with inner container's scroll which also looks it works in codepen in my setup it does not. Even in a clean white page I still get the same problem. I would try to troubleshoot further and update the answers here for anyone who might need it in the future.

 

If anyone else has faced similar behavior between scrollsmoother and inner container scroll let me know if you have any suggestions...

Until then... Thank you all!

Thanks Rodrigo.

[Rodrigo]

Hey Nick,

 

Thanks for the kind words you're more than welcome! 💚

 

If at any point you can replicate the issue and create a demo that shows it, please be sure to post back here and we'll jump into it as soon as we can in order to help you solve this.

 

Just out of curiosity did you tried the stopPropagation() method on the wheel event as well?

 

Happy Tweening!

[Nick.Ls]

Hi @Rodrigo,

 

I figured it out...

 

ScrollTrigger.normalizeScroll helps with the window scrolls as stopPropagation too but it needs to be tested in any case since it still worked a little bit buggy in the beggining. Basically you need to target the correct container.

 

As for the Inertia bug I found out that adding a border to the #scrollContainer prevented the user to drag back to the first slide. Using outline instead worked for me. After all this time it was basically a CSS fault.

I am leaving the codepen with the bug and a comment for anyone who might need it to use outline instead. At least for this case scenario.

Hopefully it will help the next one trying to do something similar.

 

Thank you all for your time and effort!