Jump to content
Search Community

Gatsby Scroll Trigger Pin & Release

skyfy test
Moderator Tag

Recommended Posts

Hello, We finally tracked the problem with our css styling, we are facing a minor issue with scrolltrigger.

 

How to approach delay of scroll trigger on load. below is the code which we are using in Gatsby. 

 

 we want to set color first and wait for animation to complete and set sticky mode else stickymode inherits orginal colors.

 any suggestions would be great help.

useEffect(() => {
  if (titleRef.current == null) return
  if (typeof window !== `undefined`) {
    gsap.registerPlugin(ScrollTrigger)
    gsap.core.globals('ScrollTrigger', ScrollTrigger)
  }

  const intro = () => {
    const introTL = gsap.timeline()
    introTL.to('html', 0, {
      css: { visibility: 'visible' },
    })
  }
  const ToggleColor = () => {
    const toggleColorTL = gsap.timeline()
    toggleColorTL.from('html', {
      duration: 0.01,
      scrollTrigger: {
        trigger: toggleColorRef.current,
        start: 'top-=15% top',
        end: 'bottom top+=10%',
        toggleAction: 'play reset reset reset ',
        markers: true,
        scrub: 0.1,
      },
      '--text-color': 'var(--accent)',
      '--background-color': 'var(--dark)',
    })
  }
  const Sticky = () => {
    ScrollTrigger.saveStyles(titleRef.current)
    ScrollTrigger.matchMedia({
      '(max-width: 1199px)': () => {
        ScrollTrigger.create({
          trigger: titleRef.current,
          pin: true,
          start: 'top-=14% top',
          end: 'bottom center-=2%',
          // markers: true,
          pinSpacing: false,
          pinReparent: true,
          // scrub: 0.5,
          // pinType: 'fixed',
          anticipatePin: 1,
          // refreshPriority: -1,
        })
      },
      '(min-width: 1200px)': () => {
        ScrollTrigger.create({
          trigger: titleRef.current,
          pin: true,
          start: 'top-=13.5% top',
          end: 'bottom center-=35%',
          markers: true,
          pinSpacing: false,
          pinReparent: true,
          scrub: 0.5,
          // refreshPriority: -1,
          // pinType: 'fixed',
          anticipatePin: 1,
        })
      },
    })
    ScrollTrigger.refresh(true)
  }
  const master = gsap.timeline()
  master.add(ToggleColor()).add(intro(), '+=2').call(Sticky())
}, [])

 

Link to comment
Share on other sites

It seems like you want something like this (untested)? Where you use the onLeave callback to set some things up?

useEffect(() => {
  if (titleRef.current == null) return
  if (typeof window !== `undefined`) {
    gsap.registerPlugin(ScrollTrigger)
    gsap.core.globals('ScrollTrigger', ScrollTrigger)
  }

  const intro = () => {
    gsap.set('html', { visibility: 'visible' })
  }
  let firstTime = true;
  const ToggleColor = () => {
    gsap.from('html', {
      duration: 0.01,
      scrollTrigger: {
        trigger: toggleColorRef.current,
        start: 'top-=15% top',
        end: 'bottom top+=10%',
        toggleAction: 'play reset reset reset ',
        markers: true,
        scrub: 0.1,
        onLeave: () => {
          if(firstTime) {
            intro()
            Sticky()
            firstTime = false
          }
        }
      },
      '--text-color': 'var(--accent)',
      '--background-color': 'var(--dark)',
    })
  }
  const Sticky = () => {
    ScrollTrigger.saveStyles(titleRef.current)
    ScrollTrigger.matchMedia({
      '(max-width: 1199px)': () => {
        ScrollTrigger.create({
          trigger: titleRef.current,
          pin: true,
          start: 'top-=14% top',
          end: 'bottom center-=2%',
          // markers: true,
          pinSpacing: false,
          pinReparent: true,
          // scrub: 0.5,
          // pinType: 'fixed',
          anticipatePin: 1,
          // refreshPriority: -1,
        })
      },
      '(min-width: 1200px)': () => {
        ScrollTrigger.create({
          trigger: titleRef.current,
          pin: true,
          start: 'top-=13.5% top',
          end: 'bottom center-=35%',
          markers: true,
          pinSpacing: false,
          pinReparent: true,
          scrub: 0.5,
          // refreshPriority: -1,
          // pinType: 'fixed',
          anticipatePin: 1,
        })
      },
    })
    ScrollTrigger.refresh(true)
  }
  
  ToggleColor()
}, [])

Notice that I also condensed some of your tweens:

// not preferred
introTL.to('html', 0, {
  css: { visibility: 'visible' },
})

// preferred
introTL.set('html', { visibility: 'visible' })

 

Link to comment
Share on other sites

Thank you again for the support,

 

current edition initializes on first scroll, and its skips the pinning.

 

We are setting the theme which has transition duration,  if we set the pin on load it freezes the initial colors of the pinnned element,.

pinning has to trigger right after transition. completion.

 

can we have an absolute top value , currently we have set the value manually, ?

 

 

start: 'top-=14% top',
          
Link to comment
Share on other sites

Hello again, 

 

we have found the solution,  primarily when you pin the entire element is placed outside the component. We had background  and text colors changing dynamically on scroll, this caused colors to freeze when pinned, for which we used theme provider  global context to pass  the colors now it works even outside the component. We will try and share minimal working file at the earliest.

much appreciate the support

cheers

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