akapowl

Hello there, @alx Just put the stagger where it belongs - on the vars object, not on the scrollTrigger object - and you should be good to go already. From my experience, the best places to look for answers on general issues like this, usually are the docs and other ressources like the 'Getting Started' articles. https://gsap.com/resources/getting-started/Staggers/ I hope this will help. Cheers. https://codepen.io/akapowl/pen/dPbGMYO

ScrollTrigger is intended to be used with native browser scrolling - Fullpage.js on the other hand hijacks the scroll and just animates portions on the page triggered on certain events, like wheel or touch events. With ScrollTrigger's snap functionality you will never be able to exactly reproduce Fullpage's behaviour, as the snapping only ever will trigger when native scrolling is finished. You can certainly achieve similar behaviour with ScrollTrigger and GSAP's ScrollTo-Plugin but I personally wouldn't really advocate for using that technique and I also I can't find the demo for that just now. If you want to recreate some behaviour of Fullpage.js, your best bet will be to have a look at the Observer Plugin. https://gsap.com/docs/v3/Plugins/Observer/ There's lots of demos in GSAP's codepen how-to collections, that should help you get started. https://codepen.io/collection/xKoPmy https://codepen.io/collection/AEbkkJ Here are some of them. If you're having trouble implementing any of those for your intended scenario, please create a new thread including a minimal demo of what you are having trouble with, as these follow up questions deviate quite a bit from the original topic in this thread already. https://codepen.io/GreenSock/pen/XWzRraJ https://codepen.io/GreenSock/pen/ExEOeJQ https://codepen.io/GreenSock/pen/BagroVM ... When provided as a number it will snap to increments of that number, and yes, those increments represent the scroll-distance defined by start and end of that ScrollTrigger, so 0.1 would be at 10%, 0.2 would be at 20% - etc. - of the scroll-distance of that ScrollTrigger; and if I'm not mistaken it will always also add 0.0 (and 1.0) per default. As I also mentioned, in the docs it gives you all the options - you could e.g. just provide an array with [0.5] and it would only ever snap to 50% of that scroll distance, which would be right at the center with viewport-height filling sections. It is also very flexible; you could e.g. calculate different snapping points and store them in an array that you then feed as the snap value, or use a function as the snap value to begin with - lots of different options. It actually makes a whole lot of sense, although it might be a bit hard to get your head around at first. In that demo of mine you wouldn't even have to add snapping to the ScrollTriggers that are already in the forEach loop in that demo. Different scenarios need different approaches, so it might be better to just create a whole seperate ScrollTrigger that spans across the whole page's scroll-distance and is solely responsible for the snapping, where you could then feed the snap values for each of those sections. But again, if you're having trouble implementing any of the above for your intended scenario, please create a new thread for any specific questions you are having, including a minimal demo of what you are having trouble with.

If you add that configuration of yours to the demo of mine you'll end up adding as many snapping points as there are videos for EACH ScrollTrigger, which is probably not what you want. Here is what the documentation says: https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#snap But it doesn't become very clear what behaviour you are expecting, from a description like did not work at all. My best guess is that you'll just want to add ONE snapping point of e.g. 0.5 for each ScrollTrigger - maybe give that a shot. And sidenote: If you don't want it to snap to 0 in the process, you'll probably want to provide that value in an Array. You'll find the information you need in the documentation I linked above right under the information I quoted above.

Just chiming in because I'm on Windows and run my OS with animation disabled system-wide. I can definitely reproduce some sort of twitching on the GSAP example, although for me it is not as severe as in the video the OP shared - and as they said, only with negative values for the data-attributes and the parallax layers positioned absolute. For me it's more like sometimes the image will jump into place a split second after the scroll has been processed when scrolling from the very top - which I would assume may likely be related to browsers handling scrolling on a different thread than JS, and the processing of the JS just naturally lagging behind the processing of the scroll, with it sometimes visually showing in certain scenarios. Have you tried the Firewatch example with negative data-attributes and position absolute on the parallax layers? Because they are only using positive values for their data-attributes and also their parallax layers are positioned fixed. All in all their setup looks pretty similar to the GSAP example, where you said you couldn't reproduce the twitching, right? If I change the data-attributes on the Firewatch website to negative values and the position of the parallax layers to absolute, I'm absolutely able to reproduce the exact same twitching I'm getting on the GSAP example with that setup. So it may very likely not be anything related to GSAP but just a limitation with regard to how browsers handle things. 0001-0179.mp4

For the 3rd time now: your locomotive-scroll is still not working correctly as it is not set up properly. You are still not loading locomotive-scroll's CSS which is neccessary for things to work. That's why you still have a vertical browser native scrollbar showing and taking precedence on scroll before locomotive-scroll even kicks in. That is bound to break things with regard to any scroll related logic. Please start reading documentation on the tools you are using - it tells you to load the CSS pretty much at the very start. https://github.com/locomotivemtl/locomotive-scroll?tab=readme-ov-file#css You'll likely even need to add some extra styles on top of that yourself because locomotive-scroll's CSS is far from bulletproof. I did so in the pen below. And BTW, if you want your 'rest_content' div to also be scrollable you should also have it positioned inside the 'smooth-scroll' element. Everything you want to be included in the scroll needs to go inside that scroller element - except for elements with position:fixed, which are special cases in transform based smooth-scrolling scenarios. It looks like now you completely removed that line I mentioned above - don't do that. As I already said above it ... Best just take the code from the scrollerProxy() example for locomotive-scroll and stick with it. If you do not know exactly what you are doing, don't change anything about it, except for your individual ScrollTriggers. That scrollerProxy demo does have an example for pinning - but for your convenience here's another example for how you can do it. Good luck with the project. https://codepen.io/akapowl/pen/XWLWegy

Sorry to say that, but there is still a lot not functional in your demo that has nothing to do with GSAP or ScrollTrigger. You are still using the data-scroll-section attributes on all your sections There still are the native browser scrollbars showing and being used when scrolling - probably because the CSS styling neccessary for locomotive-scroll to work is just not there, e.g. the scroller needing to have an overflow-y set to hidden. Besides that you are also not loading locomotive-scroll's CSS, which you probably should do for it to work better. Those are 3rd-party-tool related things we really can not offer support for in this free support forum. With regard to ScrollTrigger: Your canvas element is not inside the scroller-element, so you won't be able to use it as a trigger element and pin it that way, as ScrollTrigger has no information about its position. You'll probably need to rethink your layout / CSS styling with that regard so it is positioned inside the scroller, looking / behaving the way you need it to. You are still using the invalid string for the start of your ScrollTrigger. With locomotive-scroll, you'll need to call a ScrollTrigger.refresh() after you have set up your SrollTriggers. Best have another look at the scrollerProxy example - you'll see the ScrollTrigger.refresh() at the very end there. Also your demo is quite convoluted on the JS side of things, which makes it kind of hard to see through everything. Maybe it would be a good idea to take a step back; first get a simple layout working properly with locomotive-scroll (without the data-scroll-section attributes), then add some sort of placeholder for the canvas element (like maybe an image) in your scroller. Then add Scrolltrigger and the ScrollerProxy and try to pin that placeholder via ScrollTrigger (following everything that was mentioned above). That way you would make sure that on the ScrollTrigger side of things everything works before you can try adding all your three.js canvas related code. I'm afraid there is not much more help I can voluntarily offer, if you can't make the things unrelated to GSAP work to make it easy for us to help on the GSAP / ScrollTrigger side of things. Edit: One more thing I just noticed: Apparently you have changed ... // ... this line of the scrollerProxy: pinType: document.querySelector(".smooth-scroll").style.transform ? "transform" : "fixed" // ... to this: pinType: document.querySelector(".webgl").style.transform ? "transform" : "absolute" ... which you definitely shouldn't do. That line in the locomotive-scroll scrollerProxy example is responsible for choosing the correct type of pinning for ScrollTrigger depending on wether locomotive-scroll is actually using smooth-scrolling, or not (which is different depending on the width of the viewport on load). For your purpose you actually don't need to change anything in the scrollerProxy, except for setting the correct scroller. If your scroller-element was anything different than '.smooth-scroll', you would also have to change the selector in that line of course - but only then.

Hello Antonio. First things first: If you want to succesfully use ScrollTrigger alongside locomotive-scroll you should hook it up via ScrollTrigger.scrollerProxy() https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy()/ Besides explanations on how to use it, you'll also find an example for use with locomotive-scroll on that documentation page linked above; it is this example right below. When setting things up, make sure to strictly stick to the order of how to process things as shown in that example. https://codepen.io/GreenSock/pen/zYrELYe Next; for things to work properly with ScrollTrigger you should definitely not be using locomotive-scroll's data-scroll-section attribute. Due to how it makes things work for the scroll on the page, especially in combination with ScrollTrigger's pinning (but besides that for e.g. markers and also in general) things will probably just not work as you might intend. https://gsap.com/community/search/?q=data-scroll-section&quick=1 Further, it doesn't really look like your locomotive-scroll is set up as it should, as there are browser-native scrollbars showing for x and y scroll - which definitely shouldn't be the case if you had things set up properly with locomotive-scroll. Then it also looks like for your animation you've written up a custom implementation for how to handle things on scroll, which might as well influence how things behave - but that is nothing we can really help you with, as this forum is intended for GSAP related questions. Lastly; the GSAP / ScrollTrigger versions you are using in your code are quite dated - GSAP by now is at version 3.12.5 - 3.6.1 was released quite some time ago and in the meantime there have been several additions and fixes. I strongly suggest to update to the latest versions of both GSAP and ScrollTrigger. So before going any further on with this, besides the updates to the files you are loading, I would suggest for you to first make sure to have locomotive-scroll set up properly, have the data-attributes removed and have it hooked up via .scrollerProxy() similar to what is shown in the example. That might already fix things for you - but anyways I would also strongly suggest for you to make use of ScrollTrigger instead of using a custom implementation for the scroll-event driven animation like you do - just to make sure verything is figuratively speaking 'on the same page'. Two last things with regard to ScrollTrigger - if you are not intending to use it hooked up to a tween or timeline, but like you do here just to pin something, you don't need to hook it up to an empty tween - instead you could also just use the ScrollTrigger.create() method. And finally; the start 'top' you set in your ScrollTrigger is not a valid value. If you use the string syntax like that, it always needs 2 parameters - e.g. 'top center' would mean 'start when the top of the trigger element hits the center of the viewport'. As usual, you'll find more explanation on anything mentioned above in the documentation. https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.create()/ https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#start

It's because you are using locomotive-scroll's data-scroll-section attribute, which, due to the way it handles things on the page, is bound to just not work correctly with ScrollTrigger. <div className="loco-content" data-scroll-section> Getting rid off that made the markers behave right as they should for me. When working with ScrollTrigger in combination with locomotive-scroll you should at all cost avoid using that data-attribute of locomotive-scroll, as especially in combination with pinning things will just not work as you might intend - I guess markers fall into a similar vein. https://gsap.com/community/search/?q=data-scroll-section&quick=1

Hello Pavel, welcome to the forum. ScrollTrigger does have a built in tool for debugging your start / end positions. You can ... https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#markers Once you enable markers in your project you'll notice that you have passed the end point of your ScrollTrigger already on load. That is because your end is set to 'when the top of that div hits 20% of the viewport's height' - which has already happend as the top of that div is at the top of the viewport on load. So now at the start of your ScrollTrigger you basically instantly also trigger the end, which is what you see. So you'll probably want to adjust your end - maybe to something like 'bottom 20%'or'+=75%'instead. You can find more explanation on how the end properety works in the docs, too. https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#end

Yep, I was also going to say that it looks like it does exactly what it's supposed to do. In this example on the left is that very same animation with just SCSS (well except for the overall ease on the tween, which I commented out for this purpose). They behave exactly the same. https://codepen.io/akapowl/pen/RwmJJaj If you want the line to start out in the middle you might just have to use multiple tweens for that alongside some relatively simple 'calculations' for the durations in relation to each other. I added the tweens to a timeline in the example below, so you can still toggle it via your buttons there. Here's my thinking process on this: Considering an ease of 'none' (which helps in situations like that when you want to achieve movements that need to be synchronized in one way or the other) that would be: Tween to one direction from the center. Then tween to the other direction. This can be repeated infinitely with a yoyo set to true and thus, since the distance it has to travel is twice the distance of the first tween, this tween should be twice as long as the first tween. and you want to delay this tween by the duration of that first tween - either via a delay or via the position parameter of a timeline. Now comes the part considering eases - let's take power1.inOut as you had it as the ease for the 'full wave': Since the first tween resembles only the out part of that wave (here; when it comes back to the top again) it should technically only have the out part of that ease applied, so here power1.out But that would result in a 'jagged edge' when the dots start moving up from the center, as the tween it is not easing in - you can see that with the commented out version of the timeline in my example. So actually we do want an inOut ease - with the duration unchanged, it would result in a 'malformed wave' at the beginning though. So I changed the ease of the first tween to 'power1.inOut' too, increased its duration (1.5 times what it was before seems to look fine; so 0.75 now) and the delay of the second tween accordingly, and it looks smooth again. Maybe somebody else has a more clever approach that I didn't think of, but I hope that can help in some way. https://codepen.io/akapowl/pen/mdYKKQz

Hello @mage - welcome to the GSAP forum. I just took a quick look at your Sandbox and it looks like it's working just fine - or am I missing something? Also, just to make sure, it doesn't look to me like that example you're aiming to recreate uses any premium plugins at all. All it loads are the core GSAP file and ScrollTrigger, which is a plugin that is free to use for everyone. So any problems occuring for you shouldn't be related to any of the premium plugins. That example is quite complex and uses some quite advanced techniques, so I'm not usre if it's the best to use for learning purposes - especially if you don't have the deepest knowledge. But if you really want to go for it, here's the thread from which that example originated - it was quite the journey and thus should have lots of useful information. I hope that will help. Good luck and have fun.

I'm glad it helped. Those lines in the onLeave callback record the scrollposition of where the ScrollTrigger started set the scroll-position of the associated scroller to that position disable that ScrollTrigger (which will also remove the pin-spacing) set the animation associated with that ScrollTrigger to be completed refresh ScrollTrigger so all other ScrollTriggers on your page also get to know about those changes and (again?) set the ScrollPosition That last line was first commented out in my pen since you are using ScrollSmoother anyway and I was testing if it was needed then. For me it worked fine without that line - but it also doesn't appear to do any harm, so you can probably also just leave it in there. You will however probably not want to use 'once: true' in your scenario because apparently having it set will cause the whitespace to remain, if your page reloads at a point further down where the ScrollTrigger shouldn't be active anymore.

Yes, you're right, this way it's even better than my quick pen for illustration, because now you are no more using an element that you are animating in a way that it changes its position as the trigger element for your ScrollTrigger. ? Usually that is what 'once: true' is intended for but since are pinning and do have that pin-spacing you will need to do some more things to get it to work only once. Something like was described in this thread. https://codepen.io/akapowl/pen/vYwjYoX

Hello Rafal. Reading the documentation usually helps a lot. Here is what it has to say on pinning: https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#pin The important parts for your question are underlined. Since you are simply setting pin to true, you are telling ScrollTrigger that you want to pin the trigger element, which is your logo. But judging from your description that is not what you want. What you want instead is target the element that you want to pin. I added an id of 'hero-image' to your image in the hero-section to make it really easy. pin: '#hero-image' That should work a lot more like you intended then, right? https://codepen.io/akapowl/pen/bGyMGxr

I was just about to answer with a strong suspicion. When using Wordpress / Elementor these jumps on pin / unpin are a typical sign of CSS transitions being applied somewhere on the element that gets pinned. Just as in this other recent post and the older one below. Maybe those can help you figure out what to look for. Edit: And now I see, that Cassie already seems to have pinpointed the exact element/transition.