bp-lp

Wow thanks for the super thorough walkthrough here, I definitely appreciate it. I did notice that the scroll trigger hitch I've been so stuck on is still evident in this latest example - video showing this here. Both of the pinned titles on the contact page exhibit the jumpy behavior I've tried to outline in the previous posts / videos. To see it : If you navigate to the contact page in the example, scroll down to the first pinned title (CONTACT PAGE SECTION ONE), let it pin but keep it on screen so it's still visible, then navigate away by clicking a different nav item. You will see that the title will jump up on the page. I'll dig deeper into the example to pick apart the transition logic to see if I can get something going.

@Rodrigo I noticed the same or seemingly similar issue to my issue in one of the the Nuxt starter examples and sorry I didn't realize this before. To view the issue in the starter example. 1) Click over to the layers page 2) Scroll down at least one pinned section 3) Navigate away to Boxes or Scroll Trigger pages (You will see the pinned sections jump to the previous section when you navigate away from the page). Meaning if you have scrolled down to section two, and you click a nav item, you will immediately see section one on screen before the page transitions. If you are on section three, you will immediately see section two when you click on one of the nav items, etc. I think the ctx.revert() is getting called before the page transition completes. I forked the starter with some logging here : https://stackblitz.com/edit/nuxt-starter-xxh6yq?file=helpers%2FtransitionConfig.js Main question is - is it possible to prevent ctx.revert() from executing until each page transition is completed? I was under the impression the the page transition was more or less stopping other execution until done() was called during onComplete. Secondarily and I feel like this may be a stretch, when there is a scrolltrigger using pinning is there was to force it to pause so on ctx.revert() it doesn't change position on screen.

Some minimal progress on my side but I have some questions / observations related to the way I have structured these tweens and scrolltriggers. I've managed to track it down the issue to the following code gsap.from('.progress-1', { scrollTrigger: { trigger: '#sticky-1', scrub: true, pin: false, start: 'top 25%', end: 'bottom 25%', markers: true, }, scaleX: 0, transformOrigin: 'left center', ease: 'none', }); A few things I am noticing: -- If pin is set to true, I see the page jump when navigating to another page, if pin is set to false I do not see the page jump issue. -- if pin is set to false, I see the animation progress finish when navigating to another page - meaning the tween completes as if the end position was met with the scrollTrigger -- not sure why this is happening, but I expect this may be the cause of my issue. When the item is pinned and it jumps, it's jumping to where the animation end spot would be as if the tween had been completed. I assume I am missing something obvious about the way I have this structured. Here's a video with some detail of what I'm seeing, and the latest StackBlitz example I'm working in.

No worries on the timing, I appreciate any and all guidance. This forum has been a wealth of knowledge and I've found out a ton of great info while working through it.

I haven't made much progress into identifying what is causing the page jump other than it appears to be directly related to something I'm doing with scrollTriggers on the about page. I added a ton of logging and an extra few pages in the stackBlitz example and I'm seeing the following. Transitions to any combination of pages that are not the about page seem to function fine without a hitch on the scroll when navigating to a new page and firing the page transition (index to long, long to longer, longer to index, etc). It doesn't seem to be the single #transition-overlay element in the page transition onEnter onLeave events. I made the transition overlay hot pink so it's visibly noticeable. I'm noticing some interesting numbers when logging the scroll on the about page (attached). if I comment out the scroll triggers from 63 to 114 on about and run the page, the transition issue isn't there anymore.

I follow the logic on the ordering and making use of ScrollTrigger.refresh(), makes sense and definitely solves the first issue. I didn't realize we could do things like this end: last.scrollTrigger.end, ?that's fantastic.

Sorry if the original ask wasn't very clear, here's a video outlining the two issues. https://www.loom.com/share/0773b7d4fea447ebbc9def07b21101bd?sid=ad606f5e-d6b2-4d1c-9124-4664c5d9b858

I have a relatively simple ScrollTrigger Nuxt example here : https://stackblitz.com/edit/nuxt-starter-sjp5s3?file=pages%2Fabout.vue To view - navigate from home to about and scroll down. Just a note - this example only fires ScrollTrigger code after a page transition in watch() Ultimately I'm wanting to pin each left and right side in the center of the screen and then show progress of the pinned scroll section on the right. Very generally this is functional, but I feel there's a lot that is off. I feel like there's likely some better approaches with css (assets > main.scss) and js here. Two questions : 1) left side (it) : I feel there should be a way to set the end to the bottom of the parent wrapper instead of this +=699 nonsense, I'm just not sure how to accomplish this. Everything I have tried didn't seem to function. ScrollTrigger.create({ trigger: '#it', scrub: false, pin: true, start: 'top 25%', endTrigger: '#next-section', end: '+=699%', }); 2) On transitioning away from the About page (after scrolling down to the left / right sections - post things being pinned ) there is a very noticeable jump in the scroll position as the transition is triggered and Im at a loss for why. I have added some back to home buttons underneath that section to show this.

Thanks for the recommendations @Rodrigo! Appreciate the links to these examples as well.

Hi, I'm new to GSAP, working in Nuxt (also green) and here's a sample https://stackblitz.com/edit/nuxt-starter-sjp5s3 I have a few questions: I have a splitText instance that kicks off as you scroll on the home page. I don't appear to be cleaning that up and re-initing that correctly and I'm not sure where I'm going wrong. It works on load but on leaving the page and returning to the page it doesn't reset properly. I'm using the page transition example from the GSAP/Nuxt starter, my question there is - what are some good practices to make sure things kick off in the right order of operations from a timing perspective as you enter and exit pages. I have some delays set to make the intro text transitions work based on the timing but I feel this could be a lot cleaner.