ScrollSmoother/Draggable Update Function

[rmbettencourt]

I looked into the docs section for both plugins. However, I found nothing that updates these when new content is inserted/modified (via ajax or div height change). Iµ have a scrollbar that makes the height more similar to a native scrollbar height. At first load, it works flawlesslesly, but when content is modified or inserted (I have dropdown menus, that change the scrollable height, comments that are inserted via ajax, etc.), the scrollbar seems to glitchy because it does not update. My main thing is with the draggable plugin, since the animations seems to work on the new content with ScrollSmoother. 

Anyhow, is there a way to update BOTH plugins when the dom is changed or window is resized?

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Rodrigo]

Hi,

 

As mentioned without a minimal demo there is not a lot we can do but for both Plugins there are methods that help you with that.

 

Draggable has a specific update method:

https://gsap.com/docs/v3/Plugins/Draggable/update()

 

ScrollSmoother doesn't have a specific method, since in this case ScrollTrigger's refresh method should trigger automatically when the height of the document is updated. You can try two things either separately or together.

1. Call the ScrollTrigger refresh method, for the specific ScrollTrigger instance that every ScrollSmoother has:

   const smoother = ScrollSmoother.create();
   
   // Later add content
   const addContent = () => {
     // Add your extra content here
     
     // After adding the content you can do this
     smoother.scrollTrigger.refresh();
   };

   Also you can call a global refresh method:

   const smoother = ScrollSmoother.create();
   
   // Later add content
   const addContent = () => {
     // Add your extra content here
     
     // After adding the content you can do this
     // This is a global refresh method for EVERY ScrollTrigger instance
     ScrollTrigger.refresh();
   };

   https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.refresh()/

2. Call the ScrollTrigger update method after adding the content:

   const addContent = () => {
     // Add Content
     
     // Then refresh and update
     ScrollTrigger.refresh();
     ScrollTrigger.update();
   };

Hopefully this helps.

Happy Tweening!

[KylerSchroeder]

Thank you so much for the solution. Now, you gave me the solution, and I also found a solution to my other problem, which is assignment writing. I hate it. and a few weeks ago, I found this https://canadianwritings.com/ website that writes essays for you. And I was amazed by their work. At first, I thought I was going to waste my money, but it was good. If you are also struggling, then you can trust them with your money.