Jump to content
GreenSock

stevensunsunsun

Content start and end changing if resizing the screen during scroll

Go to solution Solved by OSUblake,

Recommended Posts

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! 😄

Screenshot 2022-03-28 at 18.58.03.JPG

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

Link to comment
Share on other sites

  • Solution

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.

 

  • Thanks 1
Link to comment
Share on other sites

Hi,

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

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



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',
Link to comment
Share on other sites

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}`,

 

Link to comment
Share on other sites

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', {
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.
×