Pin is messing with the scroll animation.

[Balram]

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.

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

[Rodrigo]

Hi,

 

Honestly I don't think that pinning is what causing this but the fact that your approach might not be the best. Unfortunately we don't have the time resources to create custom solutions for our users.

 

I set up this simple example that hopefully provides a good starting point:

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

 

As you can see it works without any issues. What you have to figure it how to scroll to those precise positions. What you can do is add labels for each slide in order to get the timeline labels time, then with the total duration of the timeline get the percentage or progress of each label and finally with the start and end points of the ScrollTrigger instance you can set the scroll position for each label and each section.

 

There could be more approaches to this, but as I mentioned before we don't have the time resources to do this type of complex stuff. You can contact us for paid consulting or post in the Jobs & Freelance forums to get help there.

 

Hopefully this helps.

Happy Tweening!

[Balram]

55 minutes ago, Rodrigo said:

Hi,

 

Honestly I don't think that pinning is what causing this but the fact that your approach might not be the best. Unfortunately we don't have the time resources to create custom solutions for our users.

 

I set up this simple example that hopefully provides a good starting point:

 

 

 

As you can see it works without any issues. What you have to figure it how to scroll to those precise positions. What you can do is add labels for each slide in order to get the timeline labels time, then with the total duration of the timeline get the percentage or progress of each label and finally with the start and end points of the ScrollTrigger instance you can set the scroll position for each label and each section.

 

There could be more approaches to this, but as I mentioned before we don't have the time resources to do this type of complex stuff. You can contact us for paid consulting or post in the Jobs & Freelance forums to get help there.

 

Hopefully this helps.

Happy Tweening!

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.

[GreenSock]

I don't have time right now to read back through everything, but if you're just asking if there's a way to scroll to a certain progress point of a ScrollTrigger, sure...

 

let progress = 0.5,
    st = animation.scrollTrigger;

st.scroll(st.start + (st.end - st.start) * progress);