akapowl

Good to hear you got it working And yes. The part with data.current.container.remove(); is another barba-related thing that needs to be done in certain scenarios like yours, because there is a timespan when both - the new and the old barba-container - are in the DOM at the same time. So you need to make sure the old stuff is gotten rid of before ScrollTrigger is being applied, so it does its' magic to the right portion of the code. Again, that is not really related to GSAP per se - just to clear things up for future readers. On a side note: I love, how you melted Zach and Jack into one person named Zack

Well, I guess that is very well more related to the way barba works, than it is a GSAP issue. You have to kill the 'old' ScrollTriggers on page transition and re-initialize them fresh on entering the new page. What worked for me was this nifty piece of code I grasped from Jack or Zach once (don't know which one of you it was) let triggers = ScrollTrigger.getAll(); triggers.forEach( trigger => { trigger.kill(); }); You will have to find the right barba-hooks for your project to kill the 'old' ScrollTriggers and re-initialize the 'new', though. Hope this helps a bit. Cheers, Paul

Thanks @ZachSaucier. In the example of my pen, your work-around works pretty good (except, it gives some flashes every now and then). In my actual project, things are a bit more complicated though, since I am using smooth-scrollbar etc., so I couldn't get your solution running over there. What really helped me, were those event-listeners. I had been trying to find a solution of my own before, but was only using a ScrollTrigger with the built-in callbacks onUpdate and onRefresh. That couldn't give me the result I wanted. But with help of those event-listeners, I got to calculate the total height of all pin-spacers on refreshInit and on refresh and set the position on resize depending on the difference between those values.

Hello all. I noticed some odd behaviour (at least to me it feels sort of odd) with ScrollTrigger when resizing. As you can see in the pen below, there are those sections that have a ScrollTrigger-Pins and are being translated horizontally on scroll. When I set the width of the items in those sections to an absolute value, like 960px, everything behaves as expected on resize. When the items' width is set to a relative value though, like 50vw, on resize there are those jumps, that probably occur because ScrollTrigger adds or substracts the extra space to/from the pin-spacer and you get pushed down or pulled up on the page. This becomes visible when scrolling past the first horizontally translated section and making the browser window wider/narrrower - especially when viewing the section in between and doing the resize then. Since this probably is a rather edgy scenario, is this sort of behaviour to be expected in this case? And / or is there a workaround to still be able to use relative values for the width of the items?

Oh, yeah, @ZachSaucier totally right. It is curtains.js and not pixi.js - my bad. Don't know why pixi.js came to my mind when it obviously says curtains.js in the title.

Hey @Michael Gudzevskyi The effect on that page is achieved with use of smooth-scrollbar library and pixi.js. Actually, the creator put his code in the issues-section of smooth-scrollbar library on GitHub once. Here is the link. https://github.com/idiotWu/smooth-scrollbar/issues/222 I don't think it is that easy to create sth like that - at least it isn't to me. Maybe the code from the link can help you get where you want, though. Cheers, Paul

You're welcome @sobakaalkaidi. Another sidenote from me (smooth-scrollbar related - nothing to do with GSAP): In your code I noticed, you are missing the 'd' in front of 'amping': const scrollbar = Scrollbar.init(document.body, {amping: 0.05, delegateTo: document}); It is supposed to be damping, not amping. Like this: const scrollbar = Scrollbar.init(document.body, {damping: 0.05, delegateTo: document});

Hey @sobakaalkaidi You have that container there, so I think you need to direct the scrollerProxy to that container. ScrollTrigger.scrollerProxy(container, { ... Plus, you have to set the container as the scroller for the ScrollTriggers. gsap.to('.pin', { scrollTrigger: { trigger: ".pin", scrub: true, markers: true, pin: true, // pinType: "transform", start: "top top", end: "+=1000px", scroller: container } }); At least that got it working for me: https://codepen.io/akapowl/pen/0dd4ce258a7afbd9fa48faafaa03030b Cheers, Paul

Just updated my Pen. https://codepen.io/akapowl/pen/8de9b6055b4bdf2b54655d780aecd569 This works wonderfully. Pins where expected, tweens as intended, and that 'full-size'-ScrollTrigger now gives the wanted value. It is a great solution. Thanks a million for that!!!

Hi @Nisanez First off, I don't think your syntax is quite up to par when it comes to timelines. What you are doing there can be achieved in a much cleaner way. Second, in your case there really is no need to use .fromTo - for what you are doing there, you can just use .to for the seperate animations. The timeline takes the values of the previous animation into account for the upcoming. And that probably also gets rid of your 'undefined' problem. Check this pen and look how easy that seems: https://codepen.io/akapowl/pen/220761a8a79111b5fba65a06bcc055a9 Hope I understood you right, and this helps. And maybe also check the docs to get a better understanding of timelines: https://greensock.com/docs/v3/GSAP/Timeline Cheers, Paul

Hey @juliebam Can't tell you anything new on that topic that wasn't already stated above, but I have just recently tried to get this working for myself. So I thought, I'd share my pen anyways, maybe you see something, that might help: https://codepen.io/akapowl/pen/184a8048eb288057e35373a348926421 I have been using masks for every single letter, so I could adjust the stroke width for every single one of those masks if I wanted to. In the end it really comes down to how much effort you wanna put in when creating the SVGs and especially the masks in your SVG editor. For me it was just too much effort to get the masks the exact right way, as you might notice on the intersection of the letter "o". But I think, when you play the animation at a speed, where it comes close to immitating real hand-writing, one might not really notice it anyway - at least it doesn't bother me this way.

Ah, okay, I see the problem there. And I think you're right, sorting the triggers internaly, like you would in 3.4.1, might cause too much confusion for users (just like it did for me there). Your solution with providing a sorting method, that can be called manually when needed, in combination with setting up priority-values definitely sounds good to me. That way you'd keep it intuitive for basic use, but let users have the option to tweak it for more edgy cases, if needed.

Alright, yes, that works a lot better. Animations are back and resizing works properly. Just one thing I noticed (although you might already know that and be working on it since this is still beta): I have a ScrollTrigger for a Scroll-Progress-Bar that takes into account the whole height of the document. Animation on that works just fine, so I left it out in the pen. But it is dependent on the progress value and I noticed that that value is offset now. To say it with Zach's words: it looks like it doesn't accomodate for the extra space added by the pins. You can see that if you check the console for this pen: https://codepen.io/akapowl/pen/c0ad7ecfa73edf600bc2a1172ee38ce6 Somewhere around the middle in that pen, the extra ScrollTrigger I added reaches its progress of 1, which it should on the bottom of the page, if I didn't make a mistake there. Anyways, thanks once mor for all the helping.

@GreenSock That helper function indeed does the trick with my initial pen posted here, thanks. But when I turn to setting functional values for things that will change on resize, just as @ZachSaucier hinted me to do above, it doesn't seem to work. The pins are working just fine and as expected, but the selected elements are not being animated anymore. https://codepen.io/akapowl/pen/565970116f5aee6bd5acf58a89261080 Why could that be? I just couldn't figure it out over the weekend.

Nah, I am sorry for the large amounts of code to look through. Thanks for your effort on that part. Something like that was what I thought initially - that might be the reason why the different instances somewhat overlap. But I really am no expert when it comes to JavaScript/jQuery, so I always consider a mistake on my behalf first. And thanks a lot for pointing that out - would have been the next step to work on anyway.

Hey @ZachSaucier thanks for the quick reply. Maybe I missunderstand: By "nested" you mean pins inside of pinned elements? Because I don't have any of those.

Hey there, I am applying multiple ScrollTriggers to multiple sections via multiple .each-functions (jQuery). https://codepen.io/akapowl/pen/2feab8db2006bd6440047302f03e455f When only having one .each-function, everything works just fine and as expected with either one of those two in my pen. Elements get pinned, when they should and animations run as intended. As soon as I have multiple .each-functions though, things start to get all wonky - pinned elements start being animated when they are not supposed to - way to early. It seems like everything is out of place. Am I doing something horribly wrong here? Would be glad if somebody could point me in the right direction. Cheers, Paul

If that helps, you ask?! Man, you have basically just made my day, month, and whole year to come! This is just awesome. The demo looks super smooth - love it. I really think - all scrolljacking caveats aside - I am most certainly not the only one who'd love to see this implented. Thanks a million for the effort. Sometimes it's just unbelievable how awesome you guys at Greensock are!

Okay, that smooth-scrollbar plugin I want to use is probably off the table for use with scrollTrigger then. Thanks again for claryfing things @ZachSaucier @GreenSock

Sure does! Thanks for your time and the indepth explenation. My issue is sort of related to this post So, in my understanding from both, your answers here and the thread stated above, there really just might not be an easy or really performant way to hook scrollTrigger up to a pre-existing/co-existing smooth-scrolling plugin or function, since it just is not intended for that kind of usage, am I getting that right?

Hey Zach. Thanks for the quick reply. The horizontal sections are not supposed to be 'scrolled' horizontally at all. All they are supposed to do, is translate on the x-axis, when scrolling on the y-axis. I updated the pens, so the scrollbar on the x-axis stays hidden. Is this what you meant with "breaks the experience"? I get, that this is supposed to be scroll-jacking, and that it breaks the experience and brings a lot of caveats, but I just love the looks and feel of it - especially the way smooth-scrollbar animates the scroll.

Hey there, first off: congrats on and even more, thanks for the scrollTrigger Plugin - it's just awesome. I have been using scrollMagic in a project of mine so far, and been re-writing it to use scrollTrigger instead. I love it, since in most cases it is way easier to use and wrap my head around what I need to achieve certain sorts of scroll based animations - great job on that! But I have run into an issue, that probably is rather an edge case, since it is concerning the use of scrollTrigger together with idiotwu' smooth-scrollbar plugin. I know you guys try keeping things in here related to problems related directly to GSAP, but I thought I'd post anyway, since my problem might have something to do with scrollTrigger's performance - not saying it does, though. It's more likely that I am doing something wrong here, I guess. So, I have sections that are being pinned and their contents transformed on the x-axis to make them appear horizontally scrolling. I found, that hooking scrollTrigger up to smooth-scrollbar works in just the same way as it works with scrollMagic; by adding a listener to smooth-scrollbar that refreshes scrollTrigger on the virtual scrolling of smooth-scrollbar. In my project, when I have only one section with that effect, everything runs buttery smooth, but as soon as there is more than one section with the trigger applied, the scrolling suffers drops in fps to below 50 - which makes it pretty much visibly laggy and sort of annoying. I made a pen with a total of 5 horizontal sections, to show, what I mean. https://codepen.io/akapowl/pen/7c21be9a241e0e13b98316c197b617ef This is not the case with scrollMagic - everything staying smooth there. https://codepen.io/akapowl/pen/074d0a380e2a0393b13d0fb57b5be166 So, now I am wondering: Since, if I understood correctly, scrollTrigger makes all the heavy requests on refresh, is it not a good idea, to hook the refresh to the virtual scroll? scrollMagic seems to handle it absolutely fine, so might this be something, scrollTrigger could be improved on? Or am I maybe doing something totally wrong here? Maybe somebody finds the time to look into this. Any input appreciated. Cheers Paul

@BalkanBrothers Is this the sort of effect you wanna achieve? https://codepen.io/akapowl/pen/86230786f141d29e61b37aeabf17433b Note that it is not clean at all - especially, when moving from one side to the other, there is a huge jump. Made this just for clarification of some sort for the effect you might want. There probably is a way better way to to this with stronger use of GSAP's Utility Methods, I guess.

@adamoc Unfortunately working with barba most certainly results in a pretty complex bit of code, that isn't that easy for me to get my head around, if I didn't write it myself. But what you can do in barba is the following just as an example. You can give your index.html the barba-namespace 'index' and your about.html the barba-namespace 'about', which you set up in your html-files like so. In your index.html it could be like this: <main data-barba="container" data-barba-namespace="index"> This will come in very handy for triggering different functions on transition to different pages. When you initialize barba you can then access these namespaces in VIEWS like so: barba.init({ // Some options here transitions: [ { name: 'default', // Available hooks like… beforeOnce( current, next, trigger ) { ... }, // More hooks regarding this transition here... }, // More transitions here.... ], views: [ { // Actions taken ONLY when certain page is viewed. namespace: 'index', // Available hooks… afterEnter(data) { playYourAnimationForTheHomepage(); }, // More hooks regarding this namespace only... }, // More namespaces, like maybe 'about' for your about.html ... ], ... In that views-section you can run functions that will only be triggered on a certain hook for when a certain namespace/page is being viewed. If I understood correctly, this might be the right path to a solution for your problems. Read more about views here. https://barba.js.org/docs/advanced/views/ But beware - I think the hooks for views differ from the global hooks that are available in barba and the hooks for transitions.

Hey @adamoc. Seems like you are having issues similar to what mine were about. This here is probably what is most important to get your head around with barba: Everything inside the barba container will get removed on transitioning to another page and will be replaced with the content inside the barba-container of the page you are aiming at. When you revisit the initial page then, the content is loaded fresh. Every timeline you might initiate on load of window e.g., will be aiming at those elements that are there on load and will stay 'connected' to these even when they are removed on transition. But since they actually are not there anymore - but have been replaced - when you come back to this page, you won't see anything happen. You will have to find a way to reinitiate the timeline for page-specific elements everytime you transition to that page, just like @mdelp suggested above. Hope this helps clear things up a bit. There is a lot to consider when using something like barba.