[ScrollSmoother/Draggable Update Function]

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?

[Effects Refresh on Ajax Content]

3 hours ago, Rodrigo said:

Hi,

 

Your demo was missing ScrollTrigger and Draggable. ScrollSmoother needs ScrollTrigger in order to work, so You have to use ScrollTrigger.

 

Here is a fork of your demo:

 

 

 

Finally I don't see any Ajax code in your demo that works in the way you have described here in the thread. Maybe I'm missing something here 🤷‍♂️

 

Hopefully this helps.

Happy Tweening!

Yeah. The fact that ajax does not seem to work on codepen. That is why I committed, it is just a simply jquery ajax call. When it is successful, it will call the ajaxLoad function. 

[Effects Refresh on Ajax Content]

43 minutes ago, Rodrigo said:

Hi,

Honestly I couldn't tell you with just that information, that's why we ask users for a minimal demo in order to see what they're trying to do and where/when the issues are arising. You can fork this starter template and take it from there:

 

 

 

Finally here is a simple setup using ScrollSmoother and ScrollTrigger to animate the clip path property on an element:

 

 

 

Hopefully this helps.

Happy Tweening!

I really do not like using codepen, since I always have issues making it function how my developing code is going. Anyhow, here it is (does not really work on my end though):

See the Pen ZEPjYYP by rmbettencourt (@rmbettencourt) on CodePen

[Effects Refresh on Ajax Content]

33 minutes ago, Rodrigo said:

Hi,

 

If you are loading the entire page maybe you're using some transition library like Barba or something like that? In that case you should kill the ScrollSmoother instance after the page has changed and create it again when the page loads again.

 

Also this seems a bit wasteful IMHO:

onUpdate: (self) => {
  var clipPathHeight = (1 - self.progress) * 100 + '%';
  gsap.set('.gooey-container.page-progress .progress-fill', { clipPath: 'polygon(0 100%, 100% 100%, 100% ' + clipPathHeight + ', 0 ' + clipPathHeight + ')' });
},

If you want to do something like that, better create a ScrollTrigger instance that handles that particular animation instead of approaching it that way, is far better in terms of performance.

 

Happy Tweening!

Just using jquery ajax. So then I do smoothscroller.kill()? And how would the scrolltrigger look like over the update to handle the animation for the progress-fill?

[Effects Refresh on Ajax Content]

I was not able to find anything regarding smooth scroller and content via ajax (that applies to my specific question).

Anyhow. I had tried .kill(); but that seemed to not really fix my issue (so I simply reverted back to paused(true/false). The scrolltrigger aspects work (as in animation of characters in certain elements). However, the data-lag or data-speed seem to disapear when the page gets loaded again via ajax. Here are my parameters:

 

bodyScroll = ScrollSmoother.create({

            wrapper: 'main',

            content: '.main-container',

            smooth: 4,

            normalizeScroll: true,

            ignoreMobileResize: false,

            smoothTouch: 0.4,

            effects: true,

            onUpdate: (self) => {

                var clipPathHeight = (1 - self.progress) * 100 + '%';

                gsap.set('.gooey-container.page-progress .progress-fill', { clipPath: 'polygon(0 100%, 100% 100%, 100% ' + clipPathHeight + ', 0 ' + clipPathHeight + ')' });

            },

        });

[Creating Fullscreen Plasma]

The styling will also need to be adjusted, but I think I have seen a pen similar to this that used gsap for it. I have not been able to find it, but I remember it used some gsap timeline to create bubbles similar to this to fill up the page, in the timeline it would add or remove the bubbles based on screen width and height.

See the Pen VwRbzBy by rmbettencourt (@rmbettencourt) on CodePen

[Trial Versions on Virtual Hosts (Wampserver)]

2 hours ago, GreenSock said:

Hi @rmbettencourt. Welcome!

 

The gsap-trial package files will only work locally (like file:// or localhost or ends in .local), or on a whitelisted domain like CodePen, CodeSandbox, Stackblitz. Does that clarify things? 

Not really, I asked if there was a way to run them on virtual hosts. I was able to find a workaround though. 

[Trial Versions on Virtual Hosts (Wampserver)]

I decided to give the club plugins a trial before I commit to buying. However when attemtping my first test run, I got the redirect. Is there a way to use the trials on virtual hosts, these are local afterall?