nvatland

Hello! I think I probably set this up wrong, but I've been stuck on it for a few days now. I'm hoping to pin the image once it reaches the top of the view port and then pin and animate the text and bar once they reach the center. I want the timeline to finish animating before the text and bar start moving again, which is where I'm getting stuck. I tried pinning the image in a different scrolltrigger but then I had to wait until the pin was complete before the timeline would play. Any help would be greatly appreciated. Thanks! Nicole

onEnter, onLeave, onEnterBack, and onLeaveBack are referring to the ScrollTrigger itself, not an individual animation inside of the ScrollTrigger timeline right? Or am I misunderstanding it? Here's an updated codepen where I added a "second phase." Hopefully this helps! When scrolling back up, as the individual .to() animations are triggered, I'm trying to get them to run a function. https://codepen.io/nvatland/pen/VweJbGK

Totally understandable! I think the root of my question as it relates to GSAP is how to call a function on a specific animation using ScrollTrigger when scrolling in reverse (like onStart or onComplete).

Thanks for this! I probably oversimplified my codepen demo–in my actual timeline I have multiple videos in multiple nested timelines that will need to be played/paused depending on the timeline/scroll position which is why I was attempting to use it in the .to() property. Should I set up individual ScrollTriggers for these videos? I can also expand my CodePen to better reflect the multiple nested timelines/multiple videos.

Hello! This might be a stupid question, but I have a timeline animation that is being scrubbed on scroll using ScrollTrigger. I have a video that I want to toggle whether it is playing or not so I was using onEnter and onComplete which is working, however when I scroll back up I want the video to start playing again but I'm not sure how to achieve this. A basic CodePen is below. Thanks!

It seems to be working great now, thank you so much for your help on this!

Sorry, that's still not what I'm going for. https://codepen.io/nvatland/pen/wvMojjm This is best viewed in the full view as the screen is too small in the editor view. I created a new CodePen that has buttons that filter the content based on color. So when I click "Show Blue" all of the blue images should be shown and everything else is hidden. I am adding display: none to the ones that are hidden and am not expecting them to lazyload in, but the blue ones that are visible on the screen should all load. However, there are a few scattered throughout that don't load. If I cycle through the different buttons and then go back to blue all of the images will load. If I have scrolled to the bottom (thus loading all of the images) and then click a filter, all of images will be there. In the attached image, I have pressed "Show Blue" without scrolling down. As you can see, the fourth image and the ninth image did not load even though they have entered the stage. I hope this makes more sense!

Hi Jack, Sorry I think I wasn't explaining things properly. I am purposely hiding elements with the filter-hide class (display: none) when the button is pressed and then running ScrollTrigger.refresh() as there have been DOM changes. However, on pressing the button it seems that not all elements are being refreshed properly or are being overlooked. If you press the button before scrolling all the way down (and thus loading every image), some that should be visible fail to load until you press the button multiple times. For example, in the attached image, all of the images here should be the same but there are a few that are blank. If I scroll to the bottom of the page and then back up then some of the images will then load. Let me know if this makes more sense. I can try to create a new reduced case as well.

I was able to replicate it using each instead of batch as well. It looks like positions aren't being recalculated when display: none is applied. If you turn markers on you can see that they go down throughout the page (not sure if they should move with the object or not on refresh). Here's the each codepen: https://codepen.io/nvatland/pen/eYJBOGB

Thanks for the tip on the once: true, I updated that. I had end set to "bottom top" in the beginning but switched it to "bottom bottom" because I was still having this issue so I was seeing if that solved it. I updated my codepen demo with once and end: "bottom top" and also increased the number of images that are loading which is replicating the issue that I am having on my production site. If you click the button before scrolling to the bottom of the page, some of the images aren't loading in until it is refreshed again (try clicking it before as soon as you see the button). I did a console.log of the .batch on my production site and it is still loading the images in the order that they would have originally displayed so if I scroll far enough down and then back up the images will then display.

Hey @GreenSock one more question related to this. I have images lazy loading using .batch() and then being filtered out by that pinned button. However, sometimes when a filter occurs there are some images that don't load but are in view. I have updated my codepen to include this– I moved the refresh scrolltrigger button up to the top and then the images are in the third section with their source swapping at 125%. When you click the button it is randomly hiding some of the content. If you press it a few times you will most likely run into some images not loading even though they are past the 125% mark.

Yes, that worked! Thank you so much ? And ah okay perfect, noted on the toggleActions!

I’m not sure if it’s best practice, but I used endTrigger: “footer” and end: “bottom top”. This way no matter how tall my page is the element will be pinned.

Hello! First of all, I must say that I am absolutely loving ScrollTrigger, thank you so much! I have a div that pins to the top right portion of my page when it reaches the top and stays there unless it is scrolled by again. This div also contains filters that will hide/show content below based on what is selected. Because of this, I believe I have to run ScrollTrigger.refresh() to update the elements (I am lazyloading images using ScrollTrigger.batch()). When refresh runs, my pinned div falls behind the navbar and doesn't reappear until a scroll takes place. It also causes issues with the future scrolling and will no longer pin to the top at certain points. I have a codepen created with a button at the bottom of the last section that calls ScrollTrigger.refresh() to replicate the issue. I think it might be an issue with my toggleActions values, but I haven't been able to find a combination that works properly. Thank you so much for your help!