Julien G

Thank you for your answer. It is working now with this function inspired by getScrollPosition from helper functions : function getScrollPosition(id: string) { const st = ScrollTrigger.create({ trigger: `#${id}`, pinnedContainer: '#pin', start: 'top top' }) const stStart = st.start st.kill() return stStart; }

Hello, i'm trying to make a hash link to work with ScrollTrigger and the pin functionality with no success... When the trigger is reached, an element containing the whole page is pinned, to stop everything during the animation. It seems that the link is pointing to the original location of the element (before ScrollTrigger resize the pinned element). I tried to locate the position of the element in the dom with element.getBoundingClientRect() to perform a scroll with window.scrollTo() but same issue, it returns the original location. How can I scroll to an element that is contained inside a pinned element? Maybe I'm pinning the wrong element?

Using VueJS, adding the following to the router fixed the issue: router.beforeEach((to, from) => { if (from.path !== to.path) ScrollTrigger.getAll().forEach(el => el.kill()) return true }) router.afterEach((to, from) => { if (from.path !== to.path) { ScrollTrigger.refresh(); ScrollTrigger.update() } })

Thanks for you answer. You convinced me and I think i'll stay with the 200ms "delay" ☺️. I maybe found a workaround, by wrapping the content of the pinned element in a div, with width: 100vw. This way, ScrollTrigger.refresh() is still performed 200ms after the last "resize" event, and the content is resizing with the browser ☺️. https://codepen.io/juliengmd/pen/YzYBQQQ

Hey, when an element is pinned, it's not resized with the browser but has a delay before it gets resized, I assume it's for performance issue, but how can I avoid this? This can be viewed on the codepen: make the browser small, wait few seconds, and then make it bigger.