Jump to content

Search the Community

Showing results for 'barba'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. I think the reason for why it doesn't work properly after a page-transition, boils down to the fact, that for a certain period of time within barba's lifecycle, both, the old and the new container will live together in the DOM. Now while you are initiating your new locomotive-scroll instance everytime with reference to the new barba-container, your scrollerProxy is only being created with reference to '.smooth-scroll', which will be available in both, the old and new container at that time - and since the old container sits above the new in the DOM tree at that time, you will be referencing the old container's .smooth-scroll with that. You can check the difference between the two elements you are targetting by logging out console.log(smoothScroll.parentElement.getAttribute('data-barba-namespace')) vs. console.log(document.querySelector('.smooth-scroll').parentElement.getAttribute('data-barba-namespace')) in your initSmoothScroll function. So you can either simply just change the element you are targetting in your scrollerProxy to be the same you are targetting when creating your locomotive-scroll instance, or alternatively just remove the old barba-container at the proper time since you don't need it for your type of page-transition anyway. Both options resolved things for me. Hope they do for you, too. Thanks for the heads-up btw @Cassie - was scratching my head for a minute or two there, before I saw that.
  2. Thank you for your reply! Tried several more options. I realized that I can't use setTimeout here, because it affects the performance of Barba JS a lot. I took it and the header started working normally, the class is added after the barba transition, but now a new problem has appeared, which is directly related to the ScrollTriger. The END marker of the white section should be at the very end, but for some reason it is placed in the middle. How to set the delay, I don't know, because again, it is not desirable to use setTimeout.
  3. Thanks so much! So I don't really know enough about barba or locomotive to help with exactly *why* But something wonky's happening with the order that things are being called. If I pop a scrollTrigger.refresh() in a delayed call it sorts it out. That's basically saying, hey scrollTrigger, check where are the positions are again and recalculate stuff. I imagine what's happening is that the first time that scrollTrigger is made, the elements are in a slightly different position or don't exist. This is a bit of a band aid, if I were you I'd whack a bunch of console logs in there, look into barba's callbacks and make sure you're calling stuff in a logical order. https://codesandbox.io/s/young-lake-rmegei?file=/src/js/app.js:1641-1708 Also worth mentioning that the initial call was a ok for me after removing the height on the .dark class in the CSS. That was adding a height to the header when the .dark class was added. Maybe that was confusing you? It baffled me for a little bit!
  4. Hi again). Made a small example on codesandbox. The example clearly shows that when scrolling on a light section, the class is not added to the header, but this is only part of the problem. Also, it should all work after barba transition from the about page to the home page.
  5. Hi all. I've been trying to fix the bug for a couple of days now, searching the web for an answer, but nothing helps. The essence of the problem is as follows - after barba transition scrolltrigger markers does not move with locomotive scroll. I will throw my code below. Thank you in advance for your kind help in solving this bug! I will be grateful to everyone! app.js
  6. Hi, I'm a framework guy so normally I'll use either Vue or React and leverage their routing system for something like this. I know that there are some Vanilla JS alternatives such as Taxi and Barba. I've never used them so I can't tell you much about them, but you should take a look at them and see how they work: https://taxi.js.org/ https://barba.js.org/ Hopefully this helps. Happy Tweening!
  7. @GreenSock Thanks again for helping out. been trying it to integrate with barba everything works well now. if we have content above and below horizontal scroll it creates some spaces and act weird, i opted for @Rodrigo solution, that animation is not wanted but bearing with that.
  8. Thank you for sharing @Rodrigo! While this is super helpful, I think the main question can actually be said without mentioning Barba, that was just some additional context. Do you have any idea how to reverse a timeline that's called through a function?
  9. Hi @alexlederman and welcome to the GreenSock forums! First thank you for being a Club GreenSock member and supporting GSAP! 🥳 Honestly I have zero experience with Barba so I can't help you with that. Lucky for us @Ihatetomatoes created a full series of videos for working with BarbaJS and GSAP: Take a look at it and hopefully you'll be able to find a way to implement it. If you keep having issues, let us know and remember to create a minimal demo that clearly demonstrates the problem you are having. Happy Tweening!
  10. Hey everyone, sorry if this question has an obvious answer as I'm playing around with GSAP for the first time. At the moment I have my code set up for a menu animation like this: const menuBtn = document.querySelector("#menu-btn"); var tl = gsap.timeline({ paused: true }); tl.set("#menu", { autoAlpha: 1, }); tl.from( "#menu", { height: 0, duration: 0.5, ease: "in", }, "<" ); tl.set( "#menu-btn", { text: "Close", }, "<" ); tl.from("#menu", { duration: 1, ease: "in", }); tl.from( "#menu-index, #menu-right", { opacity: 0, y: -50, duration: 0.75, // stagger: 0.25, }, "<-0.5" ); tl.reverse(); menuBtn.addEventListener("click", () => { tl.reversed(!tl.reversed()); }); What I'm trying to do is figure out a way to convert this to a function that can be called to play or reverse the animation (for transitioning between pages using Barba.js) as well as work with .addEventListener for toggling manually. I know the basic format for doing this is something as follows, but I can't seem to get it to reverse playback: function menuAnimation() { var tl = gsap.timeline(); //Animations here return tl; } Thanks in advance for your help!
  11. I added a comment above, which I'm not sure you saw; First things first, make sure to load ScrollTrigger, because at the moment you are not even loading it on your website! No apoligies neccessary. As of now, that auto-tweening might not even be related to using barba, but just to fact that you are currently not loading ScrollTrigger. Nonetheless all that information should be helpful going forward. As you can see from the posts linked, there are quite a lot of those around here. Working with barba can become tricky because it changes the way things are getting processed. My suggestion would be to really take it slow; first undersstand the core concepts of how barba works and then include everything else with that knowledge in mind, piece by piece - otherwise it can become quite the uphill battle.
  12. Hey @akapowl this info is great. Thank you! I was struggling to find any previous topics around this. Yes apologies! I should have included that Barba was part of the build. I very much appreaciate you delving a little deeper. I've not really worked with Barba but i'll review the lifecycles again and see what I can do. I'll let you know how I get on with it all.
  13. Heyo! If I am not absolutely wrong, using a timeline vs using a single tween really shouldn't make a difference in this case. Here is your codepen (with GSAP and ScrollTrigger loaded now) working and not automatically tweening - even with the start set to '+=1' as you have on your website @sbme123, which btw is an invalid value for the start because starts of ScrollTriggers can not be relative values (what should they be relative to ?). Edit: I had another look at your website and it looks like now you are not loading ScrollTrigger there, which would be an explanation for the auto-tweening when getting to that page you mentioned. Everything I mentioned below doesn't become less important to know when working with barba, though. https://codepen.io/akapowl/pen/GRGEMeW One very important piece of the puzzle you forgot to mention is, that you are using barba.js - which I bet is the cause of your issues. There are a lot of things to consider when using JS with a framework that makes your website behave like a Single-Page-Application. The most important with barba being a) kill old ScrollTriggers when leaving a 'page' and (re-) initialize ScrollTriggers when entering a new 'page' b) be aware of barba's life-cycle, because at some point (if not explicitly changed by yourself) the old and new page-containers will be in the DOM at the same time stacked on top of each other, which is bound to throw off the calculations for initiated ScrollTriggers I linked a couple of threads below, which have some critical information for the use of barba with ScrollTrigger. Also, I tweaked an example I made on stackblitz earlier to show a way to properly integrate that fake-horizontal scenario. Although it is kind of convoluted by now (which to a certain extent is neccessary due to the way barba works), I hope it will still help. https://stackblitz.com/edit/web-platform-tffdg2
  14. Thanks, you're right. Calling the method like that it stores a new value. This means that I have to call ScrollTrigger.clearScrollMemory('manual');at the beginning of my code to store the right value. Probably the documentation needs to explain this feature better, because in my project I didn't think I need to call that method but now I found I need it to save the value. Unless this sentence in the doc: is valid also for Barba.js page transitions. Do you suggest to call that method every page transition? Thanks.
  15. Hi, Scrolltrigger version 3.11.3 (and probably older versions too) save the history.scrollRestoration value at the beginning and it seems it's not possibile to overwrite that value later: _scrollRestoration = _win.history.scrollRestoration || "auto"; Then the stored value is applied again every clearScrollMemory call: _isString(scrollRestoration) && (_win.history.scrollRestoration = _scrollRestoration = scrollRestoration); Even setting history.scrollRestoration to manual at the beginning of my script, due to Webpack bundle, the Scrolltrigger code is extecuted before mine. In my case I need to set the scrollRestoration to manual because I use Barba.js Is there a way to do it? Am I missing something?
  16. That definitely sounds like a barba.js question. I'm totally unfamiliar with that tool. We love helping with GSAP-related questions, but unfortunately we just don't have the resources to support other 3rd party tools/frameworks. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations. You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look.
  17. I have a transitions I'm trying to perform that works. But when I change page I should reset my javascript but I can't. Someone to help me? Thanks My code: function delay(n){ n = n || 2000; return new Promise((done) => { setTimeout(() => { done(); }, n) }) } function pageTransition(){ let tl = gsap.timeline(); tl .to(fermerTest, {display:'none', duration:0.01}) .to(ouvrirTest, {display:'block'}, '<') .to('.loading-screen', { duration:1.2, height:"100%", top:'0%', ease:'Expo.easeInOut', },'<') .to('.loading-screen', { duration:1, height:"100%", top:"100%", ease:'Expo.easeInOut', delay:0.3, }) .to('.ul-navbar', { y:'-100%', duration:0.1, }, '-=0.90') .to('.deuxieme-slide', { y:'-100%', duration:0.1 }, '<'); } function contentAnimation(){ document.querySelector('body').classList.remove('overflow') document.querySelector('body').classList.remove('open')” } barba.hooks.enter(() => { window.scrollTo(0,0); }) barba.init({ sync:true, transitions:[{ async leave(data){ let done = this.async(); pageTransition(); await delay(1500); done(); }, async enter(data){ contentAnimation() }, async once(data){ contentAnimation() }, }], }) <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://kit.fontawesome.com/6434cb6a94.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="{{asset('css/style.css')}}"> <title>Martin Manderveld</title> </head> <body data-barba="wrapper"> <div class="load-container"> <div class="loading-screen"></div> </div> <div class="cursor"></div> <div class="scrollbar"></div> <div class="clickScrollbar"></div> <div class="div-loader"> <div class="div-gauche"> <div class="div-animation-loader"> <div class="rond-loader rond1"></div> <div class="rond-loader rond2"></div> <div class="rond-loader rond3"></div> <div class="rond-loader rond4"></div> </div> </div> </div> @include('partial/navbar') <div data-barba="container" data-barba-namespace="home-section"> @include('page/home') <div class="div-cache"> @include('page/about') @include('page/projet') @include('page/service') @include('page/contact') </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/@barba/core"></script> {{-- <script src="https://unpkg.com/@barba/core"></script> --}} <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script> <script class="main-script" src="{{asset('js/main.js')}}"></script> </body> </html>
  18. I'm not really sure whether you're after barba or nuxt or vue... You've commented on a couple of threads But maybe this is helpful https://codepen.io/cassie-codes/pen/LYQaOBm At the end of the day it's all the same thing really - you just need to wrangle the right entrance/exit/mounted/onmount events, which takes a bit of docs reading and some trial and error sometimes. Pop back with a demo and make a new thread if you need more specific help. Good luck!
  19. Experiencing a strange repeat instance of a Lottie animation in my project... The top disco ball on black is the expected instance, and the one showing in the next div down (purple) isn't wanted/ I've been sure to retain the ScrollTrigger.refresh in the helper function Fully appreciate that a demo is likely required to showcase the issue, but as I'm not sure which bits of code are conflicting it's a tough one for me to strip down into a simple pen! The way I'm setting up the lottie/scrolltrigger animation works on its own without any repeating, but when I add it in with a bunch of other GSAP animations (as well as ScrollSmoother and barba.js) the second view of it in the next div appears. Long shot with what I'm able to provide here but figured one of you experts might know of a common cause? It's bound to be some of my dodgy code clashing with the Lottie helper function. I've been sure to keep the ScrollTrigger.refresh in there, but not sure what could be causing this? I'd fade it out with an onComplete after the full Lottie has scrubbed through, but that's not a good fit for the page. (PS - just a sample animation... wish I was really adding a giant disco ball... 🕺)
  20. hello i have problem with transition animation and also text. 1.For page transitions I want it to appear from the bottom and disappear to the top, but when I press the button for a short time, the transition appears from top to bottom... 2.And for the fade in text animation I have the same problem, namely if I press the button quickly sometimes the last animation has not been completed, so the animation occurs twice. I want when the button is clicked the transition always appears bottom->up, and the text always from 0 to 1 opacity. This is my code https://codesandbox.io/s/elegant-sara-5wz41g
  21. @StudioProjects, I made a simple Codesandbox you could use as a starting point to integrate Barba, see https://codesandbox.io/s/scrollsmoother-barba-js-3dwykz?file=/index.html:328-387. You technically only need a leave and enter animation and setup Barba correctly, you should be good to go in to time.
  22. Hi again! I've uploaded it to github at https://github.com/StudioProjects/barba also to Stackblitz at https://stackblitz.com/edit/web-platform-n7jjbk?file=index.html A huge thanks again for your valuable time in helping me with this! It's about time that I started using github, I've got a couple of hundred small projects and websites from when I was a Flash Dev 15 years ago...I've just returned to coding after an 11 year break and pretty much had to start from scratch over the last 12 months! My 57 year old brain is a bit overwhelmed, but I've made good progress Andy
  23. Hmm, it's really hard to inspect the code from devtools and troubleshoot. There's a nice working example of barba & gsap here: https://stackblitz.com/edit/web-platform-j6l93d?file=js%2Fmain.js If you could make a demo of your site on stackblitz that would be so much easier. Also you can check that example above and see if it helps to adjust your code to look similar. Another thing I noticed you have "sync: false" in wrong line, it should be inside transition object like this: barba.init({ transitions: [ { sync: true, async leave(data) { const done = this.async(); $(data.next.container).addClass('fixed'); pageTransition(); await delay(1000); done(); }, }, ], });
  24. Hi TheHaus! Thanks so much for your super quick response! I've changed to the new minified core, but the same problem applies, although its now changing to the projects.html page rather than the about.html page! I've uploaded it to https://www.frontenddevelopment.com.au/barba - you should now see a working css hamburger menu, rather than the white box, if not, please clear your cache. Andy
  25. I noticed you're using barba from unpkg cdn, I remember I had some issue with it and it wasn't working for me until I changed to this one: https://cdn.jsdelivr.net/npm/@barba/core@2.9.7/dist/barba.umd.min.js Can you replace it and give it a go?