ScrollTrigger resize not resetting/updating height value

[madebysix]

Hi there,

During window resize the 'scroll trigger' seems to be working correctly, however the 'pinned' element doesn't receive the correct height/calculation. (Based on my 'setUp' function)

I'm just trying to update the '.container' element with the correct height, after resize.

Unless you know of a better approach to achieving a similar effect - where the hero scrolls over the top to reveal the page content, which then begins to scroll the page.

Thanks.

See the Pen LYyYoWv?editors=1010 by Jack_Six (@Jack_Six) on CodePen

[OSUblake]

Hi madebysix!

 

I don't think you're getting the current offset. I didn't dive deep into your code, but this seems to work.

 

const init = () => {
  
  timeline = gsap.to(".panel:not(:last-child)", {
    y: getOffset, 
    ease: "none",
    scrollTrigger: {
      trigger: ".container",
      start: "top top",
      end: getOffset,
      scrub: true,
      pin: true,
      markers: true,
      invalidateOnRefresh: true,
      pinSpacing: false
    }
  })
}

function getOffset() {
  resetValues()
  setUp()
  return `+=${-(heroOffset)}`;
}

 

 

[Olegfrontend]

On 7/3/2021 at 2:22 AM, OSUblake said:

Hi madebysix!

 

I don't think you're getting the current offset. I didn't dive deep into your code, but this seems to work.

 

const init = () => {
  
  timeline = gsap.to(".panel:not(:last-child)", {
    y: getOffset, 
    ease: "none",
    scrollTrigger: {
      trigger: ".container",
      start: "top top",
      end: getOffset,
      scrub: true,
      pin: true,
      markers: true,
      invalidateOnRefresh: true,
      pinSpacing: false
    }
  })
}

function getOffset() {
  resetValues()
  setUp()
  return `+=${-(heroOffset)}`;
}

 

 

Hi, OSUblake )) i have some questions
1. what does it mean - heroOffset ?
2. what does it mean - getOffset ?

3. what does it mean function  resetValues() and what return comeback ? 

resetValues

resetValues

[OSUblake]

Hi Oleg!

 

Look at the original code in the OP's demo. I didn't write it. 

 

getOffset is just a function. You can use a function for almost every property. 

gsap.to(".foo", {
  x: () => 100
});