Search the Community

Hey Rodrigo, I've changed it to 'work-page' however once I do my transition to the work-page it doesn't work. It's not even being called once I transition in so I don't see WORK ANIMATIONS PLAYED!!! on my console. But, I see it being fired up once I refresh my page but the animations are broken. function initWorkAnimations() { if (document.body.id === 'work-page') { console.log("WORK ANIMATIONS PLAYED!!!"); const container = document.querySelector('.scrollx'); const sections = gsap.utils.toArray('.scrollx section'); // const texts = gsap.utils.toArray('anim'); const mask = document.querySelector('.mask'); . . . } Mind you that I'm firing up all my scripts in this function: // Main Scripts function initScripts() { initNavAnimations(); initMagneticButtons(); initButtonsAnimations(); initHomeAnimations(); initWorkAnimations(); } And is being used in the barba hooks barba.init({ sync: true, timeout: 7000, debug: true, // !IMPORTANT views: [{ namespace: 'work-page', beforeEnter() { // THIS VIEW MIGHT BE USELESS console.log('WORRRRRRK PAFGE ENTER'); }, }], transitions: [{ name: 'default', async once(data) { // Once page loads initSmoothScroll(data.next.container); initScripts(); // FIRE ALL SCRIPTS ONCE PAGE LOADS }, async leave(data) { pageTransitionIn(data, this) await delay(1200) data.current.container.remove(); }, async enter(data) { pageTransitionOut(data, this); }, async beforeEnter(data) { ScrollTrigger.getAll().forEach((x) => x.kill()); console.log('destroying everything'); locoScroll.destroy(); // Optional! initSmoothScroll(data.next.container); initScripts(); // FIRE ALL BEFORE ENTERING THE NEW TRANSITIONED PAGE ScrollTrigger.refresh(); // IMPORTANT! } }, { // Optional name: 'to-home', from: { }, to: { namespace: ['first-page'] }, once(data) { // do something once on the initial page load initSmoothScroll(data.next.container); initScripts(); }, }] })

Hi, Thank you for responding I'm trying to upload everything to codesanbox but is acting weird. It doesen't read my images and gsap is not being defined. Please see: https://codesandbox.io/s/compassionate-wescoff-92sm2w?file=/app.js Also, I've already tried using gsap.context() since it was suggested to revert the animations once I transition and I call the ctx.revert() in my barba transitions but nothing worked. I put all my animations inside the context such as my home animations. Maybe I'm calling the functions wrong? So something like this: // NOTE: data.next = current container barba.init({ sync: true, timeout: 7000, debug: true, // !IMPORTANT views: [{ namespace: 'work-page', afterEnter() { initWorkAnimations(); ScrollTrigger.refresh(); console.log('WORRRRRRK PAFGE ENTER'); }, }], transitions: [{ name: 'default', async once(data) { // Once page loads initSmoothScroll(data.next.container); initScripts(); }, async leave(data) { pageTransitionIn(data, this) await delay(1200) data.current.container.remove(); }, async enter(data) { pageTransitionOut(data, this); }, async beforeEnter(data) { ScrollTrigger.getAll().forEach((x) => x.kill()); ctx.revert(); // ----> REVERT or KILL????? console.log('destroying everything'); locoScroll.destroy(); // Optional! initSmoothScroll(data.next.container); initScripts(); ScrollTrigger.refresh(); // IMPORTANT! } }, { // Optional name: 'to-home', from: { }, to: { namespace: ['first-page'] }, once(data) { // do something once on the initial page load initSmoothScroll(data.next.container); initScripts(); }, }] }) let ctx; function initHomeAnimations() { if (document.body.id === 'first-page') { ctx = gsap.context(() => { //Page 2 const tlH = gsap.timeline({ scrollTrigger: { trigger: '.background', // markers: { startColor: 'blue', endColor: 'blue' }, scrub: true, start: '-40%', end: '40%', }, }); tlH.fromTo(...) .... }

Hello, Ignore the errors. The errors are due to not providing the rest of the HTML code which has nothing to do with the issue I've encountered. With or without the HTML the nav bar is flickering or more specifically I think the rounded-div is the issue since that is the last left-most element in the fixed-nav. Before I did any Barba transitions the flickering will still be there so It's not related to Barba or missing HTML elements errors. Please take a look at the same code pen, I've provided the first full-page html doc without the second page which codepen isn't allowing me but it shouldn't matter for this issue. NOTE: I have the full code and I have already fixed any necessary errors before posting this issue.

Hi everyone, I'm trying to implement some simple scrollTriggered timelines to a project that's using Barba.js for page transitions and locomotive scroll (with [data-scroll-container] as the ScrollTrigger Proxy). I've managed to get it working on first page load however after transitioning to another page the same timelines appear very janky. If you check teh codepen demo you'll see that images scale smoothly on the index but not the about page. I've tried killing all ScrollTrigger instances with Barbas beforeEnter hook but I think I must be doing something wrong when re-initializing locomotive scroll. If anybody has any experience in using these libraries together and has any advice that would be great! Many thanks https://codepen.io/mulegoat/project/editor/XvJVNP

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.

I am trying to make a simple overlay transition effect with barba and gsap. when I click on the Page 02 link the overlay transition effect move across the page from left to right but the page did not change, I will have to click on the link the second time for the page to change how can I fix this thanks. Barba.Pjax.start(); var FadeTransition = Barba.BaseTransition.extend({ start: function() { Promise .all([this.newContainerLoading, this.fadeOut()]) .then(this.fadeIn.bind(this)); }, fadeOut: function() { const TransitionPromise = new Promise(function(resolve){ const OutTransition = new TimelineMax(); OutTransition // .set(".cover", {display:"block", y:"100%"}) .to(".cover", 0.5, {width: "100%", ease: Power2.easeOut}) .to(".cover", 0.5, {width: "0", left:"100%", ease: Power2.easeOut}) //.set(".cover", {display:"none"}); }); return TransitionPromise; }, fadeIn: function() { let _this = this; //TweenLite.set(this.oldContainer, {display:"none"}); TweenLite.to(this.newContainer, 0.1, {opacity:1, onComplete:function(){ _this.done(); } }); } }); Barba.Pjax.getTransition = function() { return FadeTransition; };

I create barba.js page transition whith GSAP animation, barba.js is working but gsap animation is not working, when i change the href path location like href="./html/service.html" to href="service.html" its working fine <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="./html/servics.html">Services</a></li> </ul> </nav>

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/

Hi, Sorry to hear about the issues ? Unfortunately there is not a lot we can do in a live page and on top of that I don't see any barba transitions there. You are positive that the ScrollSmoother instance is killed before removing the previous route is removed from the DOM and that the new one is created when the new route is added to the DOM and the other is no longer present? Maybe try killing all ScrollTrigger instances as well, just in case: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.killAll() Beyond that I can't think of any other cause for this, except that maybe wordpress is adding something that is causing it. Also ideally the smooth wrapper should be a direct descendant of the body tag, right now you have another DOM element as an ancestor of the smooth wrapper. Sorry I can't be of more assistance. Happy Tweening!

https://repl.it/join/wxtqbzvv-eest Hi there. I've run into some trouble implementing Barba JS. The prototype I am working on incorporates BarbaJS for page transitions and Isotope for gallery filtering (which isn't relevant for this query). In the prototype, if you click on 'project' the page transitions from 'home' to 'project' with a swipe. The functionality I would like to implement is that when you close that green project page it swipes the green away to reveal the home page (basically the reverse of the entry tranistion). At the moment, the function to animate that swipe is initiated but the transition doesn't actually occur - the green page just closes. The approach I have taken is to use BarbaJS Rules to designate particular functions on certain events. Any help or comments are greatly appreciated. Of course if a response to another post addresses my query please feel free to point me there. Thanks again.

If the GSAP timeline is not finished, when I load the next/previous post with Barba, it breaks. This is the problematic transition. Can anyone spot what's wrong here? Thank you { name:"next", leave({ current, next, trigger }) { return new Promise(resolve => { const timeline = gsap.timeline({ onComplete() { current.container.remove() resolve() } }) const image = current.container.querySelectorAll(".photo") timeline .to(image, { opacity: 0 }, 0) }) }, beforeEnter({ current, next, trigger }) { return new Promise(resolve => { const timeline = gsap.timeline({ onComplete() { resolve() } }) const image = next.container.querySelector(".photo img") timeline .to(image, {opacity: 1}, 0) }) }, enter({ current, next, trigger }) { return new Promise(resolve => { const timeline = gsap.timeline({ onComplete() { resolve() } }) const charge = next.container.querySelector("#charge") const years = next.container.querySelector(".years") timeline .set(charge, {opacity: 0, x: "-100%"}) .set(years, {scale: 0}) .to(charge, {opacity: 1, x: 0}, 0) .to(years, {scale: 1}, 1) }) } }

With GSAP and Barba.js, I would like to use different types of page transitions corresponding to the link clicked. The followings are example links: •one included in the hamburger menu •one outside the hamburger menu •one linked to the home page •one linked to inner pages In addition, I have one more question. when using Barba.js, GSAP script in html doesn't work. Could you tell me how I can make it work? *I would like to load different scripts depending on pages Thanks in advance!

Hello, I made a simple page transition (block reveal) animation with GSAP and barba.js. The animation works fine, but I have a flickering effect because the new page loads before the "leave" animation is done. I don't know how to fix this ... maybe a JS wizard could help? I attached the file. Thanks, page transition.zip

Hi, I was also having the same issue with scrollTrigger markers being pushed down after going back to the original page using barba transition, which leads to undesired behaviors on my animation. What I found is that the elements top position in the barba-container (the one barba switch between transitions) is pushed down, you can see that by logging getBoundingClientRect() in barba hooks and thus, leads to the pushed down markers. I guess scrollTrigger calculates the start and end positions based on these values under the hood (correct me if I'm wrong). One of the possible cause I found in barba docs is that during the transition, both containers of the previous and current page will exist at the same time on the DOM, so the elements in the current page may be pushed down by the elements in the previous page. Barba suggest to use data.current.container.remove() to manually remove the previous container and fix this issues. I used it in the afterLeave hook and it works just fine. Basically, I don't need to call kill() or refresh() before re-initialize the scrollTrigger and also I think it can works if you re-initalize it in afterEnter() hook as well and not neccessary have to be beforeEnter(). The relevant section in barba docs can be found here: Barba. P/s: sorry for my bad English, it is not my first language and I'm still learning it.

Sorry Matt, but that stackblitz is not really reduced. It still has ALL the code in it and as mentioned that is too much. If you need help with the transition, please reduce your code to that. ☝️That is also still the case - there still is no element with that class to be found in your HTML. So maybe it's an easy fix if you to just target the right element. One thing you will definitely need to keep in mind for barba is that you can not only just load the css that is neccessary for the one page your are currently on in the <head>. Barba will not update the <head> when transitioning so it won't load a new stylesheet. You will need to have all the CSS that you need site-wide (so for all the other pages too) ready on every other page - unless you implement a way that loads the neccessary styles only dynamically somehow. Your app.css breaks off at some point, btw, with a closing bracket (and maybe even some more styling after that) missing. Also on the two different pages you are loading two very different sets of js files - that is also something you might want to change. There is a lot of things that will be interconnected with barba somehow, so you will really need to be careful with everything, even more than on regular websites that do not work as an SPA. Copy-Pasting things together will only get you so far, trust me, I've been there. In the end you will need to try and get a deeper understanding of how barba works - there just isn't a way around that. There are just too many bumps along the road that will hit you off track if you don't.

Here is the link to the codepen project files - https://codepen.io/jeff-stark/project/editor/XLQNOO Again the demo is static, but the site I am working on is dynamic so the different page types will have different animations - so if you navigate from one subpage to another subpage (namespace = the same name) everything should reset or recalculate so the animations start all over from scratch. Same concept for portfolio page types to the next portfolio page type. I am not sure if my issue is with gsap3 or barba. I am basically trying to reset/refresh/recalculate all the animations to start from scratch when you go back and forth between the 2 pages. When the page initially loads and leaves all the animation trigger - main container. black background, the page title, then the content. It all animates out as I want it, but the next container only animates the main container and everything beyond that does not. I have tried everything - kill, restart, to, from, fromTo etc... I can get the main container within the barba wrapper to animate between the pages, but data-barba="container" data-barba-namespace="subpage" does not reset. Once it goes to the next page/container the timeline inline styles are removed from the data-barba-namspace="subpage" containers so it does not animate. Not sure why this is happening. GSAP - Again, I have tried just about everything - I am novice to JavaScript so having a hard time figuring this out. Barba - tried "views", different transition namespaces, all the different hooks - just not sure where to put the kill or reset or whatever I am missing to make it reset all the timeline values on the next container. I am hoping someone can help. PLEASE and thank you for your time. Let me know what else you need.

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.

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!

Right @ZachSaucier , I know you're sick of seeing my name pop up talking about GSAP and Barba Combination. The problem is BarbaJs doesn't really have a forum (well from what I could find anyway), but what I will confess to and start trying to do is debug my problems more before coming to this forum that's why yesterday I basically spent the day trying to debug my actual first problem I still can't get. I turned off all functions bar one and stepped through all variable values at all stages of DOM loading and manipulation through the Barba hooks , I identified the places I needed to add a setTimeout and also I found out which hooks come first(enter , DOM load , etc... ) and that the afterEnter hook is probably the best place to initialize anything you want because if you place a function call in there it gets called whether or not you're transitioning through Barba. As I said before I really did try to debug this time as much as possible and identified my problem I think . As I said in a earlier post , markers are added every time by GSAP on page load (which I'm guessing is how ye make the pinning possible starting at the start marker pin until the end marker and then the other two are to do with the scroll position on the page. So what I observed in the inspect element is that when you transition to a page with Barba the amount of markers doubles and so pushes down the start marker and end marker down the page causing my animation to start at a different place which is what I'm observing is happening in my site now if i go to homepage and click about , to counteract this what I have done is got rid of all the markers on page load so that GSAP can add it's new markers and not be pushed down , however I don't know how but the markers added are still getting pushed down even though they're only ones there now , what's happening is lets take this problem for example, On Normal page Load my Start Marker top - 2371px Height Of my Container that pins - 4320px End Marker top - 6691px - This works without a hitch perfectly After Barba Transition Page Load Start Marker top - 7175px Height Of my Container that pins - 4320px End Marker top - 11495px - This works at the wrong position therefore doesn't perform properly (overlapping other elements and what not) So to be clear If i didn't remove some of the markers page would look like this like it does now 2371 +4320 6691 7175 +4320 11495 Now when I clear it takes care of the first one's so you're left with this now 7175 +4320 11495 Now What I want is to move these positions to the same as page load normal that being 2371 +4320 6691 But when I tried to do this the actual top value changed / updated as the tag jumped up but seems GSAP somewhere has it defined that the animation is still getting set at the marker at 7175 so when I scroll to that position this is when it actually works but at the wrong position as already stated , further down the page . Wondering how are those markers position set and/or the way you use to identify where to start animation and how would I go about changing these positions to my desired ones on page load after barba transition. So now to your post above Zach , I intentially left out Barba Script and Barba wrapper data properties on the homepage as you said you wanted a simple but effective test case so you could see what I was on about that animation with Barba and without is different so I set Homepage as page without the Barba and the about page as page with it, as for not including all the resources you needed to carry out the experiment yourself stupidly I thought you were going to just look at my code , at the live version and work it out from there , I didn't think you were going to reverse engineer it so sorry for that in the future I will most definitely be more thorough with providing all resources if i'm asking a question on this forum. I'm sorry , this is all pretty new to me writing in forums as I haven't wrote questions before on forums as I'm normally a hard worker 100% never give up until you got it don't show someone else they are better than you guy and you'll get this . But taking a step backward from this over this year I have identified that asking for help is not a form of weakness but strength as you it's through help you get better and learn more things , otherwise you stuck in a rut for a long time leading to unfinished projects. So I have taken the leap to ask for more help I do agree however I should have debugged this issue above a bit better but I'm trying that's all I can do ?‍♂️. Okay what I will say and acknowledge is a huge thank you to you and the team at GSAP who work tirelessly to help us create spectacular animations and ScrollTrigger is another amazing addition to this outstanding library. Personally thank you for sorting the stupid bug I missed yesterday ? Cheers Adam

@adamoc when working with Barba there are a few things you have to get right in order to have everything working. Maybe it's best to double check everything below: All the main elements that do not have to be reloaded each transition have to be inside the Barba wrapper, but not inside the Barba container. This means all your stylesheets, JS files, things that do not change like the header, footer, ... Everything else goes inside the Barba container, i.e. the content that gets replaced everytime. In my case I have one stylesheet and one JS file, which are just compiled assets from multiple files. If I were you, I'd load all the JS file at the bottom of the file, just before the closing body tag. All functions that have to run everytime need to be reinitialised in a Barba hook, which is probably almost all of them. How I work is I write all animations and other functionality in seperate functions. Since I use WordPress the first thing I do when the site loads is init all those functions in a document ready, so in the Barba case, this means all functions have been initialised for all pages. Then I make sure that functions that need to be reinitialised every transition are included in the 'barba.hooks.afterEnter'. My barbaInit() function gets called on document.ready, together with all my other functions. Those anim_about_in() are functions containing GSAP animations for the page in animations, so they only fire when entering a specific namespace. You can init all your animations on the first Barba load to make sure if someone goes directly to the about page they see the animations, or do a conditional check with something like a .first-load class on the body to make sure all animations work both with and without a Barba transition. For the stylesheet, you need to load all stylesheets because they are outside the Barba container and will not be replaced. Same goes for all other assets. Since all assets are loaded on the first load and don't have to be reloaded every page transition you have to include them all (not just on the homepage in case someone goes directly to another page). What I do is concatenate all sass into one css file and js into one file, and then have a preloader on the first load for when the assets are loading. Hope this helps!

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!

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

Hello Ali, I tinkered around with your code a bit, and I don't think any of what you are experiencing is related to GSAP but rather to the logic of how barba works and your code having some flaws with regard to that, the following being the biggest I think: When both containers are in the DOM at the same time, they are not stacked above each other on the z-axis but rather like this ...which you can test by logging out their .offsetTop first thing in the enter-hook e.g. Here's how I see it: Since you are not waiting for a promise to be fulfilled in the enter-hook, barbas lifecycle will continue the moment your tween starts, but in between the afterEnter and the after hooks of barba, the current-container will be removed... [ that image is from the barba docs, but also to be found in this very helpful tutorial: ] [ https://waelyasmina.com/barba-js-v2-tutorial-for-total-beginners/ ] ...thus there will be a layout shift in the DOM. So the values that you recorded by getting the state of the image before the tween started will probably not be correct anymore just a moment later. Although I used bit of a different logic than you did, I got it to work with one of the key-elements being setting the next-container to position fixed (and aditionaly inset 0 and zIndex -1) and in the onComplete callback of the tween, clearing it again. gsap.set(next.container, { position: "fixed", inset: "0", zIndex: "-1" }) I'm not sure how much that will help you, but you can try tinkering with your code with the afore-mentioned in mind and see where it gets you. I hope that will help a bit though.

Hey Guys! Great work with GSAP... I have recently installed @Ihatetomatoes's Barba on my site (kinda sucessfully) After each transition the the resulting animations dont work... as a noob to GSAP and Barba, I am probably missing a piece of code to play animations on page load... this is the bit I am stuck with... I know you dont offer 3rd party support, but I think this may be a simple GSAP fix... I can see there are (barba) hooks to return to the top of the page once the page has loaded, is there one for PLAY animations / Scrolltrigger once page is loaded... Barba has seeming broke my site, but I am not giving up on it... any help would be MORE than appreciated...