How can i refresh the start and end position when the content changes?

[Balram]

I am trying to pin a container but the container have some content that comes from a cms so it takes a while to load but when the data comes the container's start and end position stays the same as for the content before. I want to change the start and end position when the content loads. I know it has to do something with .refresh() but can't figure out how it do it so can anyone help me?

 

I have included the codepen for what i am working on but it works in there but doesn't work when i get the content from cms in webflow.

See the Pen OJaxpKj by veuxon (@veuxon) on CodePen

[mvaneijgen]

Hi @Balram welcome to the forum! 

 

I would look for a function in the Webflow documentation that does what you want and then all you need is to call ScrollTrigger.refresh(). Below pseudo code. Hope it helps and happy tweening! 

 

// This is pseudo code be sure to check the Webflow documentation!
Webflow.myPageIsDoneLoading(function () {
  // This is how you refresh ScrollTrigger 
  ScrollTrigger.refresh();
})

 

[Balram]

2 hours ago, mvaneijgen said:

Hi @Balram welcome to the forum! 

 

I would look for a function in the Webflow documentation that does what you want and then all you need is to call ScrollTrigger.refresh(). Below pseudo code. Hope it helps and happy tweening! 

 

// This is pseudo code be sure to check the Webflow documentation!
Webflow.myPageIsDoneLoading(function () {
  // This is how you refresh ScrollTrigger 
  ScrollTrigger.refresh();
})

 

I tried to find something like that in webflow docs but coundn't find something. Is there a way to listen when the content loads then change the trigger position?

[mvaneijgen]

We like to scope this forum to GSAP related questions, so seen that the issue isn't on the codepen it isn't really to do with GSAP. You're better of asking webflow how you would do this.

 

You could look in to the load event in Javascript, but that only works if webflow isn't doing something weirds, which sounds it is doing from your description. Again you're better of asking webflow support they are the experts 

 

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

[Balram]

13 minutes ago, mvaneijgen said:

We like to scope this forum to GSAP related questions, so seen that the issue isn't on the codepen it isn't really to do with GSAP. You're better of asking webflow how you would do this.

 

You could look in to the load event in Javascript, but that only works if webflow isn't doing something weirds, which sounds it is doing from your description. Again you're better of asking webflow support they are the experts 

 

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

Nevermind, I found out what the problem was. It wasn't related to cms or gsap actually; it was because there was a lottie animation that didn't have a specified height and the content from cms depended on that height, so I fixed that and now it's working. Anyway, thanks for your time.