[ScrollTrigger Resize / Dissapear Issue]

9 hours ago, GreenSock said:

Ah yes, that's because you're not adjusting for pinning. When you just do a normal scrollTo and pass an element, it just calculates how far that element is from the top of the viewport and scrolls that far. But what if you're pinning something for 500px inbetween? 

 

This is where you can tap into the magic of ScrollTrigger to do all those calculations for you. Here's a forked demo that creates a simple ScrollTrigger for each section that you want to link to, and then grabs the "start" value as the scroll position. I made it stop 40px from the top so that the nav bar doesn't obscure any of it. And if you're pinning the container of one of the sections, you need to use the pinnedContainer property to declare that so it'll factor it into the calculations properly. 

 

 

 

 

Is that what you're looking for? 

 

It was!! Thank you for all the help. I really appreciate it!

[ScrollTrigger Resize / Dissapear Issue]

19 hours ago, GreenSock said:

Oh, how are you getting to the anchor link? My guess is that you're miscalculating or not accounting for the pinning that occurs. You can't just, for example, <a href="#anchor">Link</a> if you've got pinning going on because the browser has no idea how to deal with that, so when it calculates the distance it must go to get to #anchor, it doesn't factor in any pinning. There's a helper function in the docs for solving that. If you need help, please provide a minimal demo that clearly illustrates the issue. 

 

Ah noted, here's a minimal demo. You'll notice that the nav seems to work with the sections on the lower half of the page but gets glitchy around the squares and top 3 sections.

 

[ScrollTrigger Resize / Dissapear Issue]

4 minutes ago, GreenSock said:

 

I'm a little fuzzy on what you're asking here. When you set fastScrollEnd: true on a particular ScrollTriggered animation, it ONLY affects that animation (if the scroll is moving quickly enough when leaving in either direction). Were you under the impression that it looks for all other animations on the page and forces them to end when you scroll quickly? I watched the video a few times and I didn't notice anything odd, but I must be missing something obvious. 

 

Hey so the problem is that when I click "Checklist" or the logo in the nav bar I get caught in the scrolltrigger area (cat squares sliding to the left) and the anchor link doesn't complete the jump

[ScrollTrigger Resize / Dissapear Issue]

11 hours ago, GreenSock said:

Hi @joa. I'm trying to understand what you were describing here and the video is archived so I can't view it. Is your goal to pin the whole page for a while so that you don't see any gaps caused by pinSpacing? If so, you don't need to pin a bunch of elements to simulate that - just wrap everything in a <div> and pin that. 

 

I also noticed that you're calling some functions that alter the document flow by setting display to "none" or "block" which is likely causing problems when refreshing - since ScrollTrigger doesn't control that external code, it has no way to know that it must roll it back in order to re-measure things top-down, etc. 

 

If you still need help, please clarify the issue and provide a video and specific steps to reproduce and we'd be glad to take a look. 

 

Hey!

 

Thanks for the tip on wrapping the whole area in the div, it really simplifies things and it looks like it fixed my resizing issue!! Hoping QA doesn't find anything that I don't. I've re-uploaded the original video here for reference in case anyone else needs it:

 

Original Issue: https://streamable.com/ycx01q

 

@GreenSock I have another question if you wouldn't mind. I'm using "fastScrollEnd: true" to zoom through the images that move from right to left and jump to the appropriate section that's being clicked. It works on a few sections however it seems that it doesn't work for the sections above and below where the scrollTrigger animation is taking place. I've included another short video to help better explain.

 

Menu Jump Problem: https://streamable.com/t8tj33

 

 

[ScrollTrigger Resize / Dissapear Issue]

1 hour ago, SteveS said:

I can't seem to replicate the issue shown in the video within the codepen provided. If I had to guess something about the way your items reflow on mobile size is messing with the scrollTrigger. Without the actual site there's little I can do in the way of debugging. If you aren't using the scroll effect on mobile you can try killing the scrolltrigger if it detects it's below a certain screen size and then recreate it if it returns to laptop/desktop.

 Hmm, the codepen example is triggering the bug for me whenever I resize as well. I made the width 600px for the demos sake but we have it disabled for iPad sizes and below. I'll keep trying

[ScrollTrigger Resize / Dissapear Issue]

Hello everyone,

 

Thanks for creating such an amazing tool. I know that this is a common issue but unfortunately I'm having a bit of difficulty fixing my problem. I've whipped up a quick demo of the problem on codepen and included a video of how it's behaving on the actual site itself. I'm pinning the three sections at the same time to keep the middle section in view with no gap but for some reason on resize just the bottom half of the scrolltrigger glitches and then dissappears. Would really appreciate some insight, thanks!

 

VIDEO: https://www.veed.io/view/5fca3e04-1151-468e-bb65-aec9a428e537

See the Pen MWVYObo by jwoa (@jwoa) on CodePen