Search the Community

@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.

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

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(); }, }, ], });

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

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?

Hi! Thanks so much for your response! I added the .fixed selector to the css and the jquery on the hooks but the transitions still aren't working, the transition fires, and the slide-in menu is now retracted, but every page now directs to the about.html page. I've uploaded the site to www.frontenddevelopment.com.au/barba so you can see what's happening in-situ. If you click on the about button, there is no transition at all and the UI loads about.hml - if you click on any of the other buttons in the slide-in nav, the transition fires, but only partially, and the UI loads the about.html page on every button. The slide-in nav is now closed after the transition, so I'm definitely a step closer, but it's still not functioning as one would expect. The console is throwing any errors, so I can only assume that this is some kind of caching issue caused by Barba. To be honest, this library is sketchy and difficult to use and I'm nor a React dev so I'm not used to using hooks. I'll give it another day and if I can't get it working, I'll refactor everything for Swup and give that a go - its architecture appears to be far more stable and it appears to be far more user friendly than Barba. My apologies if my frustrations with this library are evident. What I'm trying to achieve is a simple transition between pages that is seamless, with the slide-in nav retracted after the transition fires. Thanks again for taking the time time to help me, it really is appreciated. Andy

I'm not sure if this is what you're going after, as you didn't explain it that well what you're trying to achieve (sorry for being straightforward :P), but from what I can see you're using sync mode, so probably you want both animations happen at same time, and you see some annoying flicker, and other animation doesn't play correctly, right? In sync mode, you neeed to handle the positions absolute/fixed of barba containers yourself, as they will show at the same time in static position, the next page container will be next to the old one (which will be out of screen), until the previous page container disappears (after first transition is complete) and the new container will show in position of old one - just imagine two divs, that have width of 100% viewport next to each other, and you change display of the first one to "none" - it's similar behaviour. So long story short, you need to add class .fixed (you can name it whatever), set position to fixed and higher z-index .fixed { position: fixed; top: 0; left: 0; z-index: 10; } Then on your barba leave hook, you need to add (with jQuery, I tried to do it with vanilla js but for some reason it doesn't work for me) $(data.next.container).addClass('fixed'); And lastly, on your enter, afterEnter, or after hook (depending on your setup), you have to remove it $(data.next.container).removeClass('fixed'); Then the transitions should work. Hope it works for your case!

HI Folks! I've been trying (very unsuccessfully) to build a portfolio site with GSAP and Barba.js I initially built everything with CSS animations as per www.frontenddevelopment.com.au/dev, but failed to get it working yesterday, so I rebuilt it stripped down in a couple of hours today with GSAP. Unfortunately, despite following Barba's documentation, I cant seem to get it working and after 9 hours today I'm pretty frazzled. It may be something silly that I've overlooked due to being so tired. Obviously CodePen is not the right vehicle for a multipage site and I'm not enamoured with it enough to buy a full membership, I spent it on a Club Greensock membership instead. I know that this is a bit off topic, but GSAP and Barba.js is a formidable combination, so I'm hoping that someone can help me get this wireframe working! AS you can see form the site on my dev server, I'm also embedding canvas elements as well. Thanks so much! Andy :) about.html contact.html index.html projects.html main.js transitions.js main.css

Am I getting you right, you already have the Warp stuff (no gsap as far as I can see) and you plan on using barba for the page transition, so the only thing you are missing now is blurring the headline(s)? A little CSS filter should do that trick, as great as GSAP is, I don't see why you would add it in this case, if all you need from it is a blur. But maybe I'm misunderstanding you.

Let's work together to clarify a few things... I don't think anyone is faulting you, @joxd, for pointing out that the user-created demo isn't fully responsive. Resizing screens appears to cause it to render oddly. Perhaps we haven't acknowledged that adequately and you didn't feel heard. We are not Three.js experts here. Most (if not all) of the issues here are related to rendering, so it's really not in our wheelhouse. We're not in a position to dig in, learn Three.js and fix some else's demo for them to make it fully responsive. But we're happy to answer any GSAP-specific questions. It may not be obvious to you from your experience in this particular thread, but this community bends over backwards to help users around here and we spend hours and hours every day trying to keep up with the constant stream of posts. It can be overwhelming, especially when so many of them end up having very little to do with GSAP. Quite a few people basically expect us to provide free general consulting services and do their development work for them or solve logic issues in their code...and they often won't even bother to provide a clear minimal demo. These forums cost thousands of dollars every month to operate, so we have to draw boundaries somewhere. We get questions that are specific to Three.js, React, Vue, Angular, Next, Nuxt, Barba, Pixi, Swiper, LocomotiveScroll, ASScroll, ScrollBar, WordPress, Elementor, and Svelte, just to name a few. We simply cannot learn all of those tools and provide full support. I'm sorry if my initial boundary-setting post came off as rude or unwelcoming. I definitely didn't mean it that way. Though you probably didn't mean it this way, your responses have come across as very disrespectful and insulting. It sounds like you felt similarly about some responses you got. So everyone got a little offended and salty here. Let's just put an end to that and give each other the benefit of the doubt. Thanks for being a customer back in 2017. We sure appreciate that. We couldn't do what we do without the support of Club GreenSock members. As a company, we place a HUGE amount of value on earning trust and treating customers with respect. One of the biggest ways we try to be there for our users is via these forums. We hear over and over again about how special this place is, how it is warm and welcoming, etc. It has taken years of very intentional effort to cultivate that. We don't have big marketing budgets or corporate sponsors - we simply focus our efforts on creating the best tools we can and supporting them well, trusting that the market will reward the efforts. Again, I'm sorry if your experience didn't reflect that. Let us know what it'd take to right the ship in your eyes. If you still think there's a GSAP problem at play here, how about if you create a minimal demo that doesn't use Three.js and only focuses on the animation-related challenge instead? I'd be glad to look at that and provide advice.

I have a background of outer space that is made of js particles with general divs of content on top of it (logo,h1,h2) When a button is click and or scroll is initiated, I want the background to quickly move into warp speed (like this) and blur the content and move and load the next page. I plan on using https://barba.js.org/ for the page transition but am new to GSAP and not sure how to achieve this otherwise. Should I recreate the stars background using GSAP and then animate the warp speed or can I use existing particle js? I really am not sure how to go about this so any suggestions or guide would be greatly appreciated. Thanks so much in advance and please let me know if you need anything to help answer.

Oh wait - just saw the sentence below the bolded one. Can you pop together a minimal demo for us? Don't worry about barba and all the rest - just a simple codepen with some coloured boxes, toggling a class and playing a flip animation. Thanks!

Hello @Arunkrs If you are using locomotive-scroll for smooth-scrolling and barba.js for page-transitions, and your problem is that your website doesn't scroll anymore after a page-pransition, this really does not sound like a GSAP issue at all but more like logic-issues with regard to locomotive-scroll and barba.js. We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting or logic troubleshooting - especially with regard to different 3rd party libraries. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations. You will probably have to make sure to either properly update your locomotive-scroll instance after the transition or to destroy the instance on the old page on leave and create a fresh instance on enter of the new page - there are different approaches to that, depending on how exactly you have things set up. But again; I really don't think that is in any way related to GSAP. There is a section in the barba docs for how to handle 3rd party scripts - it even has a part dedicated to locomotive-scroll suggesting how to handle things with smooth-scrolling libraries as such - I would suggest starting there. Happy tweening! https://barba.js.org/docs/advanced/third-party/

Hello GSAP Heroes, I'm facing an issues with scrolling. I've a navbar with multiple links. Index page is scrolling fine without issues, but when I clicked on navbar item it redirects to the page but that page doesn't scroll until I refresh it. I don't know what to do. I've used gsap, locomotive scroll and barba js.

Hi, I have developed a new film site, https://vineethachari.cloudvent.net/test/work1.html that incorporates all these plugins (Barba.js/Locomotive/GSAP/ScrollTrigger). The ScrollTrigger JS at the above mentioned URL is commented out as of now. Because, enabling ScrollTriggerJS does not achieve the following section effects. Could someone please help me find a solution to this, as I still have facing some issues with plugins.

Yes ... just like you have to remove e.g. any eventListeners you created, you should defnitely do that - not only to make sure everything will run as expected, but also because you may be creating serious memory leaks if you don't and things pile up. This here is just a very basic example logging out a number - not that it gets dangerously close to crashing your computer or something - but just imagine things piling up like that with many more ScrollTriggers on a page and some of them doing some complex stuff onUpdate e.g. https://codesandbox.io/s/h59k6h?file=/src/index.js It does make sense, but I think it also sort of depends. I tinkered around with barba in combination with scroll-smoother myself a bit in the meantime and I had my barba-container wrapped by the smooth-content and smooth-wrapper just like you have, when doing so. I actually got to (only) recalculate the scroll height just fine by calling a ScrollTrigger.refresh() after a transition - which does not appear do to the trick alone in your example - not sure why though, maybe I just missed something in a hurry here. But creating a new ScrollSmoother is something I would definitely recommend anyway though, because if you e.g. use ScrollSmoother's built-in effects, it will probably not know about the new elements on the page (but still target the old elements that aren't there anymore) if you don't - at least I couldn't get it to work after a transition, if I didn't re-create ScrollSmoother on the new page after the transition but solely called a refresh. I would also suggest specifically killing the old ScrollSmoother instance as well when you leave a page - it looks like there will be only one instance on the page anyway, because ScrollSmoother probably is clever enough to manage itself there when another instance is created, but it shouldn't hurt to kill it and doing so might prevent possible problems you may run into later on - and it could become tricky to find what's causing them then. FYI - both hooks you use for the creation of ScrollSmoother fire on first page load - so technically there isn't actually the need to also put the creation it in the once hook. Which hooks fire when is something you should consider diving deeper into when using barba, as it might also create problems at some point if you call something multiple times that is supposed to be fired explicitely only once e.g. Another barba "thing" is that the current and next container will be in the DOM for a certain amount of time during the transition lifecycle, so if you create new ScrollTriggers while that is the case, they will/might not have their starts and ends where you would expect them to be. So if you don't use synced transitions with barba, it would be best to manually remove the current container at a point when it's safe to do so - before creating STs. And now in hindsight, I realize that this is also the reason, why I couldn't get to recalculate the scroll height properly with a simple refresh call as mentioned before - because earlier I had forgotten to do that ?‍♂️ I'll stop right here, because these are the GSAP forums after all - but those should also be the most relevant points - I hope this will help a bit.

@akapowl, I got around to setting up a sandbox, see https://codesandbox.io/s/scrollsmoother-barba-js-3dwykz?file=/index.html:328-387. Really weird because I have it setup like my own project but somehow here it works, so something must be off in my own code. I do have some questions though while we're at it. What's happening is I have a small smootherInit function that runs the first browser load (barba.once) and then on every page transition again (barba.afterEnter). I have to rerun it on every page transition because it needs to recalculate the height of the page, does that make sense? Also, is it necessary to kill all scrolltriggers every time I transition to a new page? Does this have some kind of impact on performance? If you see some major flaws in the code feel free to correct me!

Hello @Vineeth Achari position: sticky won't work with smooth-scrolling on elements inside the container that gets the transforms for the smooth-scroll applied - but you also don't seem to use it in your code. The reason your ScrollTriggers are not working is because you create them before you set up loco scroll and before you set up the scrollerProxy etc. You can check by trying to log out the loco-scroll instance in different places, e.g. - when you create the ScrollTriggers it returns undefined which means it wasn't created yet. https://codepen.io/akapowl/pen/BaYXegL If you want things to work with loco-scroll, you will have to make sure to stick to the order of things being created, as it is to be seen in the loco-scroll example in the .scrollerProxy() docs. And since you are also trying to use barba, you will have to be extra careful about when to call what, because you will have to adapt to barba's lifecycle. Giving you advice about how to handle barba is way out of scope for these free GSAP support forums though - especially if your code has several hundreds of lines to parse through to begin with. It will take quite a bit of re-consideration for how and when to create/fire things, which we just can not offer to do for you. If you need help getting all those to properly work together, you can find lots of helpful links on barba's website. https://barba.js.org/docs/getstarted/useful-links/#Developer Good luck with the project and happy tweening!

Hi All, I'm integrating ScrollSmoother in my new website and am using Barba.js to handle the page transitions. Everything seems to be working, just one little thing where I'm stuck. A Codepen is a little tricky because there's alot going on, but I'll try to explain. Since Barba doesn't use page refreshes the ScrollSmoother is not created each page but instead uses the instance of the first load. So I need to create a ScrollSmoother every new page transition, which is OK, but after every page enter I need to scroll to the top and this needs to be instant, otherwise it uses the scroll position of the previous page. What happens now is that the page transition fires, but then the window.scrollTo() is a smooth while it needs to be instant. I tried to .kill() the ScrollSmoother every page leave, but since the ScrollSmoother is created in a Barba hook each time I can't access the variable. Maybe I'm missing something or making it too complicated? Any help would be appreciated! Edit: you can see whats happening on https://dev.mathieudelporte.be/md/. Scroll to the footer and click on 'Over mij', you'll see the transition and the scroll to top happening this way.

A minimal demo will definitely help if you have a question specific to GSAP. To me that sounds like a common issue people have when working with barba.js though - there are several issues in the same vein over on their GitHub, like this one. https://github.com/barbajs/barba/issues/659 The gist of things being what is also described on their section on 3rd party scripts - which technically does not only apply to 3rd party scripts (and not only to inline scripts) - you will have to call things in the barba-specific hooks if you want/need them to work after a transition. For questions specific to barba there also is a link where you find other useful links, among them an invite to their Slack-Workspace at the very bottom https://barba.js.org/docs/getstarted/useful-links/#Developer

Hi, I have a problem with Barba. When i change the page, my Javascript block on this page. Someone can help me? Thanks

Thank you all after some tries I have finally fixed it. This code works for me using GSAP + ScrollTrigger + ScrollSmoother + BarbaJS + AlpineJS import Alpine from 'alpinejs' window.Alpine = Alpine Alpine.start() import barba from "@barba/core"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { ScrollSmoother } from "gsap/ScrollSmoother"; gsap.registerPlugin( ScrollTrigger, ScrollSmoother); function contentAnimation () { gsap.set(".animated_ul_title", { opacity:0, x:-20 }); gsap.to(".animated_ul_title", { duration:.4, delay:0, opacity:1, x:0, scrollTrigger: { trigger: ".animated_ul", start: "top bottom-=400px", } }); } function scrollSmootherCreate(){ ScrollSmoother.create({ smooth: 1, effects: true, ignoreMobileResize: true, normalizeScroll: true }); ScrollTrigger.refresh(); }; function galleryScroller(){ const galleryWrapper = document.querySelector('.gallery-wrapper') const gallery = document.querySelector('.gallery') const tl = gsap.timeline() tl.to(gallery, { x: `-${gallery.offsetWidth}`, scrollTrigger: { trigger: galleryWrapper, start: 'top top', end: `+=${gallery.offsetWidth}`, pin: true, scrub: 0.5, } }) } function init(){ // do something before the transition starts barba.hooks.before(() => { }); // do something after the transition finishes barba.hooks.after(() => { ga('set', 'page', window.location.pathname); ga('send', 'pageview'); }); // scroll to the top of the page barba.hooks.enter(() => { window.scrollTo(0, 0); }); barba.init({ transitions: [ { name: 'index', once() { siteFirstLoad(); scrollSmootherCreate(); galleryScroller(); contentAnimation(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async afterLeave() { let triggers = ScrollTrigger.getAll(); triggers.forEach(function (trigger) { trigger.kill(); }); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, async after() { scrollSmootherCreate(); galleryScroller(); contentAnimation(); }, to: { namespace: [ 'index' ] }, }, { name: 'default', once() { contentAnimation(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async afterLeave() { let triggers = ScrollTrigger.getAll(); triggers.forEach(function (trigger) { trigger.kill(); }); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, async after() { scrollSmootherCreate(); contentAnimation(); } } ] }) } window.addEventListener('DOMContentLoaded', function () { init(); });

Hey there! CodeSandbox is usually a better bet for project type setups https://codesandbox.io/dashboard/home?workspace=fec44104-55b3-427e-9b38-1fba4c888d7a There are also quite a few threads in these forums from people who have asked the same question about handling Barba page transitions. This thread lists out a lot of them and gives some advice. Good luck.

Sorry, I'm not familiar with barba.js but you can call ScrollTrigger.refresh() to force it to re-calculate the start/end positions of all the ScrollTriggers. If you're recreating things on the new page, make sure you .kill() the old ones that you don't need anymore. You can kill all the ScrollTriggers with: ScrollTrigger.getAll().forEach(t => t.kill()); If you still need some help, please make sure you provide a minimal demo with only the essential code necessary to illustrate the problem. Please don't include your whole project - just a few colored <div> elements would be fine. Glad to hear you're enjoying ScrollSmoother! Thanks for being a Club GreenSock member. ?

Hello I am using this function to start ScrollSmoother (it's fantatsic BTW!) function scrollSmootherCreate(){ ScrollSmoother.create({ smooth: 1, effects: true, ignoreMobileResize: true, normalizeScroll: true }); }; Also added this cleanGSAP function: function cleanGSAP(){ ScrollTrigger.getAll().forEach(t => t.kill(false)); ScrollTrigger.refresh(); window.dispatchEvent(new Event("resize")); }; And use BarbaJS code below for page trantions all works fine on first load. But if i navigate to an other page and then back to home (index), the ScrollSmoother functionality does not work and any JS later fails. (if I remove scrollSmootherCreate(); from the code bewlo all works fine as expected) How can I 'reset' ScrollSmoother before entering back to home? barba.init({ transitions: [ { name: 'index', once() { siteFirstLoad(); scrollSmootherCreate(); contentAnimation(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async beforeEnter() { cleanGSAP(); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, async afterEnter() { scrollSmootherCreate(); contentAnimation(); }, to: { namespace: [ 'index' ] }, }, { name: 'default', once() { siteFirstLoad(); contentAnimation(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async beforeEnter() { cleanGSAP(); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, async afterEnter() { contentAnimation(); }, } ] })