akapowl

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.

@mdelp Looking good. One thing I can tell you is, that the reason, why you do not need to reinit your scripts in this setup, is beacause the only script that you use (except for the barba setup) is applied to the navigation module, which is outside of the <main data-barba="container"> . This means that it does not get removed and reapplied on every transition, but stays where it is and thus does not need to be re-initiated. You will only need to re-initiate scripts that aim at elements, that are inside of the <main data-barba="container"> and thus get removed and/or replaced.

@ZachSaucier Gotta quickly give you a special thank you. At this Point I finally managed to get the result I wanted to achieve. Before you posted this you must have posted and then immediately deleted something about my var scrollIndicationAnimation = scrollIndicationAnimation(); being the same and that I should change the variable-part. I only saw that post in my e-Mail-notifications though and I am glad I did, because only this in combination with what you and Blake said later on, made me find my final solution. Just wanted to say thanks once again for helping me out. Cheers

@OSUblake @ZachSaucier Well, I feel very stupid now. That is so obvious that it didn't even come to my mind. You are absolutely right. No way it could work as I tried to make it. Thanks for pointing it out to me. I would have tried a thousand other things before coming to realize that. Thanks a lot for your help, guys.

Unfortunately this doesn't really solve my problems, when I need to play a rather complex timeline at somepoint after a barba-transition. I also found that when I put the timeline as well as the command to play that timeline into the same function like this... function fireThisAfterTransition() { var scrollIndicationAnimation = gsap.timeline({ paused: true, reversed: true, force3D:true }); scrollIndicationAnimation .set('.scroll-indicator-main', { transformOrigin: "50% 0%" }) .to('.scroll-indicator-main', { duration: 1.5, scaleY: 1, ease: "expo.inOut" }) .set('.scroll-indicator-main', { transformOrigin: "50% 100%" }) .to('.scroll-indicator-main', { duration: 1.5, scaleY: 0, ease: "expo.inOut", onComplete:function(){ console.log ('Look, this is being executed...') } }) .set('.scroll-indicator-main', { transformOrigin: "50% 0%" }) ; scrollIndicationAnimation.play(); } ... and call that function after the barba-transition has ended, it works and the timeline will be animated. But this lacks the possibility to really control the timeline when I need to. Is it possible that the way barba works at this point, it is not compliant with the way GSAP's timelines are made up?

@mdelp Great to hear that. Maybe taking a look at your setup will get me further with my problem. I fiddeled around a bit more and got to find that single tweens like so... gsap.to('.scroll-indicator-main', { duration: 1.5, scaleY: 1, ease: "expo.inOut", onComplete:function(){ console.log ('Look, this is being executed...') } }) ... are being animated as expected in every scenario - it's just the timelines that seem to cause problems.