Content start and end changing if resizing the screen during scroll

[stevensunsunsun]

Hello 👋,

I've recreated the issue I'm having in codepen

Please ignore any oddness in the code … I'm using Nuxt and refs but have removed all that to create this simple example.

The offset positions for the content are great and working perfectly, except that if you resize the screen half way through a scroll. Then they don't start or end off screen correctly. 
 

Please advise… thank you! 😄

See the Pen XWVRoom by stevencmh (@stevencmh) on CodePen

[OSUblake]

To get the latest values, you will need to add invalidateOnRefresh: true to your ScrollTriggers and use function-based values. Ex...

 

bottom: () => `-${document.querySelector('.content-0').offsetHeight}`

 

The other issues are probably because you are animating your content-0 trigger. Definitely not a good idea as it's going to be in the wrong place when it resizes. Try animating a wrapper element instead.

 

[stevensunsunsun]

Hi,

Thanks for replying! I had tried both of those solutions but neither worked. This is with those…



So do you think that the issue is that I need to animate a wrapper? Would I need to change one or both of these lines?
 

gsap.fromTo('.content-0', {

or
 

scrollTrigger: {
    trigger: '.content-0',

[OSUblake]

You shouldn't animate the trigger, i.e. content-0. Animate something else, and you should probably animate y instead of top for better performance.

 

Also, this is not correct.

start: () => `'bottom bottom +=${document.querySelector('.content-0').offsetHeight}'`,
    end: () => `'+=${document.querySelector('.content-0').offsetHeight} +=${document.querySelector('.content-0').offsetHeight}'`,

 

Maybe more like this, but it still looks a little odd putting that bottom+=${...} in there as it's going to be way offscreen.

 

start: () => `bottom bottom+=${document.querySelector('.content-0').offsetHeight}`,
    end: () => `+=${document.querySelector('.content-0').offsetHeight}`,

 

[stevensunsunsun]

Hi, no that's ok on the other bits because the text needs to scroll right off screen and then the background section unpins to reveal the next section. So as soon as the bottom of the text is offscreen at the top, the section scrolls. That's working perfectly.

But sorry, I'm still not sure on the other part. Are you saying that to change what is being animated, I would change just this one line?
 

gsap.fromTo('.content-0', {

[stevensunsunsun]

Thanks! The issue was with the container 😄