madebysix Posted July 2, 2021 Share Posted July 2, 2021 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 Link to comment Share on other sites More sharing options...
OSUblake Posted July 2, 2021 Share Posted July 2, 2021 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)}`; } 2 Link to comment Share on other sites More sharing options...
Olegfrontend Posted July 6, 2021 Share Posted July 6, 2021 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 Link to comment Share on other sites More sharing options...
OSUblake Posted July 6, 2021 Share Posted July 6, 2021 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 }); Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now