Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'productionbuild'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 1 result

  1. 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.
×