[Reset Scroll trigger and animation to innitial values]

Hello,

 

I must be missing something in this code, how can I set default values to have no animation on every load. Currently my header slides down on every page load.

Any suggestions would great appreciated.

 

 useEffect(() => {
    if (typeof window !== `undefined`) {
      gsap.registerPlugin(ScrollTrigger)
      gsap.core.globals('ScrollTrigger', ScrollTrigger)
    }
    const showAnim = gsap
      .from(headerRef.current, {
        yPercent: -100,
        paused: true,
        duration: 1,
      })
      .progress(1)
    ScrollTrigger.create({
      id: 'navbar',
      start: 'top top',
      end: 99999,
      //   scrub: true,
      onUpdate: self => {
        return self.direction === -1 ? showAnim.play() : showAnim.reverse()
      },
    })

    return () => {}
  }, [])

 

[More than two queries in matchMedia()]

My apologies, i missed out wrongly formatted code,

 

below are the two  projects

 

https://codesandbox.io/s/scroll-lock-pinned-ogwed?file=/src/pages/index.js

 

https://codesandbox.io/s/confident-satoshi-1id2b

 

most of the references what i found were for single min and max matchmedia examples.

 

regards

 

[More than two queries in matchMedia()]

Hi Zach,

 

I am struggling a bit with multiple trigger, attached code is what I am trying to  achieve, any guidance would be great.

const Sticky = () => {
  const sectionOffset = `${sectionRef.current.offsetTop}`;

  if (!Killed) {
    // ScrollTrigger.saveStyles(stickyRef.current)

    // ScrollTrigger.config({ limitCallbacks: true })

    ScrollTrigger.matchMedia({
      "(max-width: 480x)": () => {
        ScrollTrigger.create({
          trigger: stickyRef.current,
          pin: true,
          start: `top-=${sectionOffset} top`,
          end: `bottom center-=${sectionOffset} `,
          markers: true,
          pinSpacing: false,
          scrub: 0.5,
          refresh: true,
        });
      },

      "(min-width: 768px)": () => {
        ScrollTrigger.create({
          trigger: stickyRef.current,
          pin: true,
          start: `top-=${sectionOffset} top`,
          end: `bottom center-=2%`,
          markers: true,
          pinSpacing: false,
          scrub: 0.5,
          refresh: true,
        });
      },

      "(min-width: 1024px)": () => {
        ScrollTrigger.create({
          trigger: stickyRef.current,
          pin: true,
          start: `top-=${sectionOffset} top`,
          end: `bottom center+=4%`,
          markers: true,
          pinSpacing: false,
          scrub: 0.5,
          refresh: true,
        });
      },

      "(min-width: 1200px)": () => {
        ScrollTrigger.create({
          trigger: stickyRef.current,
          pin: true,
          start: `top-=${sectionOffset} top`,
          end: "bottom center-=30%",
          markers: true,
          pinSpacing: false,
          // pinReparent: true,
          scrub: 1,
          // anticipatePin: 1,
        });
      },
    });
  }
};

 

[More than two queries in matchMedia()]

Hello,

Is there a solution to have  matchmedia ()  with multiple media queries for scroll trigger, any suggestions would be great.

 

 

ScrollTrigger.matchMedia({

'(min-width: 768px)': ( ) {

 

}

'(min-width: 1024px)': ( ) {

 

}

'(min-width: 1200px)': ( ) {

 

}

'(min-width: 1600px)': ( ) {

 

}

})

 

 

 

 

[Gatsby Scroll Trigger Pin & Release]

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

[Gatsby Scroll Trigger Pin & Release]

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',
          

[Gatsby Scroll Trigger Pin & Release]

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())
}, [])

 

[Gatsby Scroll Trigger Pin & Release]

We are expecting the problem is caused by will change  parameter in our css attributes of parent container.  we will try and recreate the problem and share it . 

[Gatsby Scroll Trigger Pin & Release]

This Solution works perfectly in safari, firefox and Chrome seems to have a problem with pinning. any suggestions would greatly appreciated.

 

Pin Reparenting worked solved the issues across various browsers.

[Gatsby Scroll Trigger Pin & Release]

Thank you, much appreciate the support, some reason its not working in my project, I will try and debug and update the status.  Any suggestions or  pit falls I should consider if sticky is not working ?

[Gatsby Scroll Trigger Pin & Release]

I am trying to lock the text and scroll the image and release the lock on Text  to scroll with image from center.

[Gatsby Scroll Trigger Pin & Release]

Hi , I  am trying to achieve similar effect as the below post in Gatsby, I am new to Gsap much appreciate any support.

https://codesandbox.io/s/gatsby-tests-xyij4?fontsize=14&hidenavigation=1&theme=dark

 

[ScrollTrigger position fixed jumps]

Hello,

 

Sorry for intruding into this thread, I tried similar approach in Gatsby , some reason it's not working . Below is the use effect code I tried to make it work. Any suggestion would be greatly appreciated.  

cheers -ak

 

useEffect(() => {

gsap.registerPlugin(ScrollTrigger)

const tl = gsap.timeline({

paused: true,

scrollTrigger: {

trigger: titleRef.current,

pin: true,

start: 'top top',

scrub: true,

markers: true,

pinSpacing: false,

},

})

}, [])