donnieberry

Apologies for the codepen not working, it is a page transition I am using. The project is using Nuxt 2 with the nuxt-gsap-module package. I have a Loader between pages which is a very simple GSAP animation that uses xPercent to move to and from the starting positions. Say for example, the page is 1920px in width. The first translate value of the animation is around 2600px, which looks and works totally fine. But, if I change the screensize to 1000px, the 2600px value remains. If I then refresh, the value becaomes 1600px for example, so it takes a refresh to refresh the value of the xPercent. I would like it so that when the user changes their screensize, the end output value for xPercent updates also. My code is not working, anybody got any suggestions? I have tried using this.timeline.invalidate(), and also killing the timeline on screen resize but nothing seems to work.

That is nearly good enough, but there is still a gap at the bottom until the element is fully scrolled off the screen. I would like it if, when the user sees the bottom of the final image, it is already flush with the footer, is that possible?

I have made an extremely barebones copy of my code. Basically, the idea is, when you scroll down, the sections pin in the middle. The image moves up, the text fades out, the next section has text fade in, then that image moves up etc. On the last section, after scrolling up, there is a massive gap between the bottom of the image and the red footer. I would like to eliminate this gap so that the bottom of the image sits flush with the footer. I've tried messing with the end attribute, adding negative margin etc but I cant help but feel I am doing something very wrong here. Could somebody advise? So, the end result should be, when the user is scrolling, once they reach the last section, there should be no massive gap and the image should scroll up as usual, effectively ending the pinning, and be flush with the footer. I have attached an image of what it should look like in the end.