Balram

Thanks for the reply, I do agree that solution is very complex and i've been trying to move away from it and your solution makes more sense, but i was wondering if there is a way i can control the progress of the animation with click of a button? like is there a function like scrollTrigger.progress(0.5) or something similar that works in a similar way because i have more animation linked to that progress and the only way i found to make it all work was to actually scroll to that specific part with complex timing and stuff. So if there's anything i could refer to that would be a great help.

I have an on-scroll animation with which I control the scroll height of an overflow container. So the problem I am having is that I have some buttons that make that section come into view with scroll. I have commented out the pin, so now it works, as you can see from the red border, but when I set the pin to true, it doesn't go to the top. I want it to go to the top while being pinned.

Nevermind, I found a solution. What worked for me was to make the element inside the overflow container scroll to top of the container and then when the element is visible in body then i used the scroll to plugin and it worked like a charm.

Thanks for replying, but I don't think this will do. What I am trying to achieve is scrolling into an element that is inside a container that is set to overflow scroll. I made some modifications to the code to make it even simpler to understand. https://codepen.io/veuxon/pen/OJaxpKj Now, when I click on the button that is supposed to make that element come to view, it just scrolls to the top or bottom, but when the element is in view, it does scroll to the top. I want to achieve this behaviour even when the element is not in view.

Hi, I have included a codepen where i have a simple animation that turns a block to red when it enter the start position but when there is some change in layout the trigger position stays the same but i want it to change the trigger positon to where the actual trigger element is. For example i have included a another block that expands on click and when that happens the trigger position doesn't changes.

Hi, I am trying to go to a section on click. I tried to use scrollIntoView() it did go to the section but didn't trigger the gsap animation while going back so i found a plugin from gsap ScrollToPlugin that worked with other element but didn't work with section within a container that is set to overflow. I have added a codepen it's a bit messy but i hope you get what i want to do.

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.

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?

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.