Effects Refresh on Ajax Content

[rmbettencourt]

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 + ')' });

            },

        });

[GSAP Helper]

I read your post a few times and I don't quite understand what you're asking. 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.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

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,

 

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!

[rmbettencourt]

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?

[Rodrigo]

Hi,

29 minutes ago, rmbettencourt said:

Just using jquery ajax. So then I do smoothscroller.kill()?

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:

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

 

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

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

 

Hopefully this helps.

Happy Tweening!

[rmbettencourt]

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

[Rodrigo]

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:

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

 

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!

[rmbettencourt]

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. 

[Rodrigo]

42 minutes ago, rmbettencourt said:

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. 

Yeah sorry but there is not much we can do with what you posted in your first post, as I mentioned this is about killing and creating the ScrollSmoother instance again using the success callback on the ajax method for it. Beyond suggesting that there is not a lot we can do. You can look into create a demo in Stackblitz (https://stackblitz.com/) that somehows reflects your real scenario, just keep it as small as possible.

 

Happy Tweening!