Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

13 Newbie

About akapowl

  • Rank

Recent Profile Visitors

216 profile views
  1. 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.
  2. 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.
  3. Hey there, I am applying multiple ScrollTriggers to multiple sections via multiple .each-functions (jQuery). https://codepen.io/akapowl/pen/MWKXmKz 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
  4. 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!
  5. 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
  6. 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?
  7. 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.
  8. 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/details/rNxzxPp This is not the case with scrollMagic - everything staying smooth there. https://codepen.io/akapowl/details/eYJEJoy 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
  9. @BalkanBrothers Is this the sort of effect you wanna achieve? https://codepen.io/akapowl/pen/qBbjyWZ 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.
  10. @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.
  11. 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.
  12. @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.
  13. @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
  14. @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.
  15. 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?