Jump to content
Search Community

ScrollTrigger Gatsby production build issue

dtcomposer test
Moderator Tag

Recommended Posts

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. 

Link to comment
Share on other sites

I really wish I could help more, but there just isn't much to go by here and I have zero familiarity with Gatsby. It's very fishy that it works perfectly in development but breaks as soon as you publish to Netlify (right?)  That certainly sounds like an issue that's unrelated to GSAP. Perhaps Gatsby or Netlify? 

 

You said that "none of the fixes worked" - what fixes are you referring to? 

 

If you still need help, it'd be best to create a minimal demo in something like CodePen or CodeSandbox so we can see what's going on in context. Again, we'd love to help with any GSAP-specific issues. We probably won't be of much help with Gatsby/Netlify though. Maybe someone else in the community has experience/wisdom to share. 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...