Search the Community

I'm having some really frustrating issues with getting the production build version of a scrollTrigger component to work correctly. I'm hoping that I'm just misunderstanding something fundamental but reading through the comments here none of the fixes have worked. It works as expected in the dev build, but when pushing to netlify for the staging build it jumps at the start of the pin, and then there is a bunch of empty margin space at the bottom and it overshoots. Here is the basic code. It's a simple side nav bar that is supposed to simply pin and scrub to the bottom. I would love to just use position:sticky for this but we have overflow issues that are making it not work and can't be changed. useEffect(() => { const oneVW = 16.8 const oneVWM = 4.14 const topBound = `top ${(oneVW * 9.5).toFixed(1)}px` const bottomBound = `bottom -${(oneVW * 15).toFixed(1)}px` const bottomBoundM = `bottom -${(oneVWM * 300).toFixed(1)}px` gsap.registerPlugin(ScrollTrigger) const tl = gsap.timeline({ scrollTrigger: { trigger: wrapperRef.current, pin: policyNavRef.current, start: topBound, endTrigger: navRef.current, end: bottomBound, scrub: 1, }, }) tl.play() }, []) I've also registered the plugin outside of the component, and in the gatsby-browser.js file just to be safe. It's definitely using it, but it just isn't correct. import gsap from 'gsap' import { ScrollToPlugin } from 'gsap/ScrollToPlugin' import { ScrollTrigger } from 'gsap/ScrollTrigger' These are the three styled-components in question: I've attempted it with and without height added. const Wrapper = styled.div` position: relative; background: ${Colors.lightSage}; padding: 0 5.7vw 14.3vw; height: 911.6vw; ${media.tablet} { padding-top: 45vw; height: 5924.7vw; } ` const PolicyNavWrapper = styled.div` display: flex; flex-direction: column; width: 13.6vw; height: 26.5vw; position: absolute; ${media.tablet} { background: ${Colors.lightSage}; width: 100vw; height: 43.7vw; top: 0; z-index: 2; left: 5.7vw; } ` const PolicyPapersWrapper = styled.div` position: relative; width: 62.9vw; margin-left: 24.4vw; /* height: 100vh; */ background-color: ${Colors.white}; ${media.tablet} { position: relative; width: 87.9vw; margin-left: 0; } ` I also think the bounds are kind of strange and not exactly working as they should. Any suggestions or ideas would be appreciated.