Search the Community

Hi folks, I'm struggling to work out why the GSAP transition isn't firing as apart of the barba.js transition? https://codepen.io/matt-rudd/project/live/ApLrbb (Ignore the 404 below, link works!) I've read and re-read pretty much all the other GSAP/barba.js/loco scroll posts on here, tried to dissect @akapowl's stackblitz but can't fathom what I'm doing wrong - likely around killing and refreshing the ScrollTriggers, or potentially some basic errors in my functions? Been staring at this for days. This seems like the very last technical hurdle I'm facing...so any insight at all will be massively appreciated!

Thank you so much or this. The CleanGSAP helped me get BarbaJS and Scroll trigger working! function galleryScroller(){ ScrollSmoother.create({ smooth: 1, effects: true }); 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, } }) } const cleanGSAP = () => { ScrollTrigger.getAll().forEach(t => t.kill(false)); ScrollTrigger.refresh(); window.dispatchEvent(new Event("resize")); }; barba.init({ transitions: [ { name: 'index', once() { //siteFirstLoad(); galleryScroller(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, async afterEnter() { galleryScroller(); }, to: { namespace: [ 'index' ] }, }, { name: 'default', once() { siteFirstLoad(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async beforeEnter() { cleanGSAP(); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, } ] })

It's the same as for the fake-horizontal-tween.. ...that's why I mentioned that it might be best to wrap everything that you need to re-create in a function and to simply call that function in a hook. Barba will remove the old page-content in between page-changes, so the elements you once told GSAP to tween on will simply just not be there anymore when you come back, but will be replaced with new elements instead. Thus you will have to re-create your tweens for those new elements. Maybe this tutorial (and the comments/questions below that tutorial) can help get a clearer picture of how barba works: https://waelyasmina.com/barba-js-v2-tutorial-for-total-beginners/

Resovled. I use a "parachute" load.js file to get some UI stuff in there early dom ready (don't judge me). It included GSAP core which causing a load conflict somwhere — but also not really needed. So have moved into main app.js and it's loading fine alongside barba Turns out I was loading an older version of ScrollTrigger. Obvious now.

Anyone else found that adding SmoothScroller via GSAP registerPlugin kills barba? (page transition killed and current URL reloaded) I know this is a very loose question - but just thought I'd check before setting up a pen / test somewhere.

Welcome to the GSAP forums @gn90 Sure, wrapping all you need to re-setup in a function and call that function in a barba hook / view on / after enter, sort of like in the stackblitz example linked below, should actually work. Additionaly you will have to make sure though, to kill any old ScrollTriggers when/after leaving a page and probably also remove any eventListeners, too. The latter you will also have to add again alongside your STs then, when entering a new page. https://stackblitz.com/edit/web-platform-j6l93d?file=js%2Fmain.js For animations to be triggered in fake-horizontal-scrolling scenarios as such, you will want to have a look at the containerAnimation property (and for tying it to the scroll an additional look at scrub). This piece on containerAnimation is from the docs: containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a demo here and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. I hope that'll help a bit. Happy tweening

Hi, i am quite new to GSAP but i love it so far. I build a small horizontal scrolling dummy where everything works fine. My page transitions are made with the help of barba.js. But as soon my new content is loaded my Scrolltrigger breaks and now it scrolls vertically. I tried to call the getMaxWidth function and initiate the ScrollTween again as soon the new content is loaded but now its not scrolling in any direction. Is there any solution to recreate the Scrolltrigger when a new page is loaded? The page transition in codepen doesnt work because i cant create a second page. (enter function of barba where i try to initiate the gsap stuff again is on line 102) And another question down the line: Is it possible to animate the whole text (like a fadeout) as soon as i scroll to the right side and fade it in as soon as i come back? maybe the opacity based on the scrollposition. Thanks in advanced, Guillermo

If you can set up a minimal demo an there is anything directly related to GSAP we can help you with, we'll be glad to try and do so. For things to work with barba, you will have to either create a project on codepen (regular pens won't work with barba) or use another platform like codesandbox or stackblitz. This here is a rather minimal demo that I recently made on stackblitz for another thread. Maybe you can fork and edit that one. https://stackblitz.com/edit/web-platform-j6l93d

//Barba Page Transitions barba.init({ views: [ { namespace: 'home', afterEnter() { links.forEach((link) => { link.style.color = '#fefefe'; }); copywright.style.color = '#fefefe'; linkHarpreetLI.style.flex = '0'; linkWorkLI.style.flex = '1'; linkCollab.textContent = 'Collab'; linkProjects.textContent = 'projects'; linkHarpreet.href = '../aboutme/aboutme.html'; animateSlides(); cursorAnimate(); }, beforeLeave() { ScrollTrigger.refresh(true); }, }, { namespace: 'projects', afterEnter() { //CHANGE COLOR links.forEach((link) => { link.style.color = '#000'; }); copywright.style.color = '#000'; //CHANGE HREF linkHarpreet.href = '../aboutme/aboutme.html'; linkWork.href = '../index.html'; linkCollab.href = '../collab/collab.html'; linkStar.style.fill = '#000'; //CHANGE STYLE // linkHarpreetLI.style.flex = '1'; // linkWorkLI.style.flex = '1'; linkCollab.textContent = 'Collab'; linkProjects.textContent = ''; featuredProjects(); cursorAnimate(); }, }, { namespace: 'collab', afterEnter() { links.forEach((link) => { link.style.color = '#000'; }); copywright.style.color = '#000'; linkHarpreet.href = '../aboutme/aboutme.html'; linkWork.href = '../index.html'; linkProjects.href = '../projects/project.html'; linkStar.style.fill = '#000'; linkCollab.textContent = ''; linkHarpreetLI.style.flex = '2'; linkWorkLI.style.flex = '0'; linkProjects.textContent = 'projects'; animateCollab(); cursorAnimate(); }, beforeLeave() {}, }, { namespace: 'about', afterEnter() { links.forEach((link) => { link.style.color = '#fff'; }); linkHarpreet.href = '../index.html'; linkCollab.textContent = 'Collab'; linkCollab.href = '../collab/collab.html'; linkProjects.href = '../projects/project.html'; linkProjects.textContent = 'projects'; linkStar.style.fill = '#cbd5e1'; linkWork.href = '../index.html'; animateAboutMe(); cursorAnimate(); }, }, ], transitions: [ { leave({ current, next }) { let done = this.async(); //An Animation const tl = gsap.timeline({ defaults: { ease: 'power2.inOut' } }); tl.fromTo( '.wrapper', 1, { y: '0%' }, { y: '-100%', ease: 'power2.inOut' } ); tl.fromTo(current.container, 1, { opacity: 1 }, { opacity: 0 }); tl.fromTo( '.slider', 0.75, { x: '-100%' }, { x: '0%', onComplete: done }, '-=0.5' ); }, enter({ current, next }) { let done = this.async(); //Scroll to the top window.scrollTo(0, 0); //An Animation const tl = gsap.timeline({ defaults: { ease: 'power2.inOut' } }); tl.fromTo( '.slider', 1, { x: '0%' }, { x: '100%', stagger: 0.2, onComplete: done } ); tl.fromTo(next.container, 1, { opacity: 0 }, { opacity: 1 }); tl.fromTo( '.wrapper', 1, { y: '-100%' }, { y: '0%', ease: 'power2.inOut' } ); }, }, ], });

IT WORKS !! thanks a lot man, i tried it and it works, and what matters is now i unsterstand more the barba lifcycle! the next container should be cleared after the flip work is done... now i need to fix the zIndex of the img element, i want it to be on top of everything... thanks again.

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.

Hello everyone, I faced a problem using gsap Flip plugin, in the leavebarba hoook works fine, also when i leave the home page, but after a page transition from about page to home, something doesnt work properly, the item moves from the original container to a different postion from the desired container... i tried a lot of solutions, using barba global hooks, also the async await, i used the flip.fit and also the flip.to, and i read the answers in this forum about this topic, honestly nothing worked for me. here is a github link of the project: https://github.com/Ali-Dakoumi/Page-Transition-Gsap-Flip-Plugin you can see it live here : https://ali-dakoumi.github.io/Page-Transition-Gsap-Flip-Plugin/about.html the leaving home animation works fine, But after leaving the about page with a simple fade out animation, the problem is when i used a flip animation while entering home, it doesnt work... const leavingHome = (container) => { const state = Flip.getState(about); about.classList.add("bigimage"); return Flip.fit(about, ".fullscreen", { duration: 3, ease: Expo.easeInOut, absolute: true, clearProps: "all", }); }; barba.init({ debug: true, sync: true, transitions: [ { name: "from-home-transition", to: { namespace: ["about"], }, async leave({ current }) { const hometitle = document.querySelector(".hometitle"); const infos = document.querySelectorAll(".info"); const img = document.querySelector(".item > img"); const tl = gsap.timeline(); await tl.to(hometitle, 0.5, { opacity: 0 }).to( infos, 0.5, { opacity: 0, }, "-=0.5" ); await leavingHome(current.container); }, enter({ next }) { enterAnimation(next.container, 0); }, }, { name: "to-home-transition", to: { namespace: ["home"], }, async leave({ current }) { await leaveAnimationAbout(current.container); }, enter({ next }) { const fullscreen = document.querySelector(".fullscreen"); const item = document.querySelector(".item"); const img = document.querySelector(".img"); gsap.to(next.container, 0, { opacity: 1, }); const newstate = Flip.getState(img); (img.parentNode === item ? fullscreen : item).appendChild(img); Flip.to(newstate, { duration: 1, ease: "power1.inOut", delay: 1, absolute: true, }); }, }, ], });

Hello folks, I was using the library Locomotive-Scroll with Barba js and Scrolltrigger proxy. But I saw the latest release of GSAP and it seems that the new ScrollSmoother plugin can correct a lot of problem I have (especially on safari IOS because Locomotive can't handle smooth : true for mobile). Unfortunately, I am struggling making things work. I set the following structure in my HTML : <body data-barba="wrapper"> <div id="smooth-wrapper"> <!-- fix content (not reinjected by barba) --> <main id="smooth-content"> <!-- I tried to invert smooth-content with barba container bu it results the same --> <div data-barba="container" data-barba-namespace="home"> </div> </main> </div> <script type="module" src="./js/main.js"></script> <!-- script where I create instance for ScrollSmoother --> </body> I have this error message : Invalid property – "overscrollBehavior" – "set to" – "none" – "Missing plugin? gsap.registerPlugin()" at load and the browser is lagging a lot. I didn't set CSS Plugin in my main.js (I tried) but I still have the issue. In the Main JS file I set: import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger"; import SplitText from "gsap/SplitText"; import ScrollSmoother from "gsap/ScrollSmoother"; import ScrollToPlugin from "gsap/ScrollToPlugin"; gsap.registerPlugin(ScrollTrigger, SplitText, ScrollSmoother, ScrollToPlugin); If you have an idea, I would be super happy. And thank you in advance !!

Sigh! I too walked on this path of "I am new to JS but I am having problems using Barba + GSAP" My 2 cents! STOP! Don't start with JS+GSAP+Barba. Start instead with JS, understand it's simple concepts, arrays, objects, scope etc ( I am still learning this btw ) Then afterwards it will become MUCH MUCH easier solving problems which arise after integrating 3rd party libraries. With nothing but love Fellow Newbie

Hello Paul, this really is more about how barba works and less related to GSAP - so you might want to consider taking a deeper dive into barba. This here is a nice tutorial that should help understand some things better: https://waelyasmina.com/barba-js-v2-tutorial-for-total-beginners/ Adding a minimal demo is always helpful, even if you think that you are 99% there - with libraries like barba things can become quite complex rather quick - so if you are asking somebody else to give you some help, it would be great to provide them with the tools for being able to offer that help. I created a project for you over on stackblitz with the code provided by @ihatetomatoes For triggereing an animation / setting up ScrollTriggers on page load, you will need to do so either in your 'load' function (where the init() happens) or you could use barbas 'once' hook , if I am not mistaken. In the example I did it in the function on 'load'. If you want to trigger animations / create ScrolTriggers after transitions, you will need to do so in the respective 'hooks' provided by barba (or if you need to do specific things for specific pages only, in the 'views') - or alternatively in an onComplete callback of that loaderAway animation if you want the transition to be complete before you trigger any animation - so it would be best to work with re-useable functions. In this example I used the onComplete callback of the loaderAway tween to trigger a tween on the headline after the page transition is finished completely and I used the after hook provided by barba to set up a ScrollTrigger for the footer. For ScrollTriggers it is also important to kill off the old ones before creating the new, so I added that to the afterLeave hook provided by barba here. I hope all this will help a bit. https://stackblitz.com/edit/web-platform-j6l93d

function init(){ const loader = document.querySelector('.loader'); // reset position of the loading screen gsap.set(loader, { scaleX: 0, rotation: 0, xPercent: -5, yPercent: -50, transformOrigin: 'left center', autoAlpha: 1 }); function loaderIn() { // GSAP tween to strech the loading screen across the whole screen return gsap.fromTo(loader, { rotation: 0, scaleX: 0, xPercent: -5 }, { duration: 0.5, xPercent: 0, scaleX: 1, rotation: 0, ease: 'Power4.inOut', transformOrigin: 'left center' }); } function loaderAway() { // GSAP tween to hide loading screen return gsap.to(loader, { duration: 0.5, scaleX: 0, xPercent: 0, rotation: 0, transformOrigin: 'right center', ease: 'Power4.inOut' }); } // do something before the transition starts barba.hooks.before(() => { document.querySelector('html').classList.add('is-transitioning'); barba.wrapper.classList.add('is-animating'); }); // do something after the transition finishes barba.hooks.after(() => { document.querySelector('html').classList.remove('is-transitioning'); barba.wrapper.classList.remove('is-animating'); 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: [{ async leave() { await loaderIn(); }, enter() { loaderAway(); } }] }) } window.addEventListener('load', function(){ init(); });

Thanks a million for taking the time to respond... I have spent this afternoon 'trial and erroring' barba based on what you sent but still no cigar... the whole transition i have on my site works as it should do... infact it looks great... its just the bit where the animations don't play once entering the new page after transition. I noticed in your GSAP you included .then(resolve()); which i thought fixed the problem... the transitions work, the animations work... but the link doesnt go anywhere, just stays on the page I am on... Maybe I am out of my depth with GSAP... I am so close I don't want to give up on it as it does exactly what I want... I am 99% there! eeek!

Hey! Thanks so much for your quick response... I would happily set up a demo to help get to the bottom of this but this: could be what I am after. The site loads up perfect I then click a button to reveal a Barba transition to another page. However all the animations on the revealed page are frozen and I (think) need a command in either the Barba code or a GSAP command to PLAY these animation once the transition to the new page has been made. I seems a super simple fix, but my coding is basic. I hope this is clear and maybe @Ihatetomatoes could point me in the direction as I think it might be a Barba thing as opposed to a GSAP thing. I don't want to give up yet! I am literally using this exact code.. https://ihatetomatoes.net/demos/page-transitions-tutorial-with-gsap/ But imagine each page in this demo has animations on it... they WON'T play after each transition. I hate to be a burden to people but I feel I can really crack on once I have this part of my project solved. Enjoy the rest of your weekend

Hi @pauljamiekidd. Thanks for being a Club member! I didn't quite understand your question - did you have a GSAP-specific question? I'm not at all familiar with Barba.js and you're correct about us not supporting 3rd party libraries - are you asking about lifecycle events in Barba where you'd have to put your GSAP code to have it fire when the page finishes loading or something? If you still need help, please make sure you provide a minimal demo like on CodeSandbox or something. It's super difficult to troubleshoot blind

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

Hi @japgroevemaker I moved your thread to the GSAP forum as it's not Banner related. It's hard to say what is wrong as we don't provide support for third party tools like Barba, and it's even harder to say what the issue is without a working demo we can play with. Have you searched the forum for Barba questions, maybe some of these can help you out?

Hello everybody, I'm facing a problem with my scrolltrigger. I made an horizontal scroll with scrolltrigger with pin true, but when i navigate to the page with barba my pin breaks. It looks like it is breaking through my pin. When i refresh the page it is working as expected. I don't know how to create an codepen using barba so i hope that i'm clear enough. I'm attaching some images that shows my problem. When i navigate: When i refresh: I've tried to kill al my scrolltriggers and re-init them again, but nothing seems to solve my problem. I hope somebody can help me. function initTimeline() { var main = gsap.timeline({ scrollTrigger: { trigger: container, snap: 1 / (items.length - 1), start: "top top", end: "+=" + (totalWidth / (items.length - 1)).toString(), scrub: 1, pin: true, invalidateOnRefresh: true, } }) } // adding items to timeline main.to(items, { xPercent: -100 * (items.length - 1), ease: "none", }); // Kill scrolltriggers in beforeLeave barba hook barba.hooks.beforeLeave(() => { ScrollTrigger.getAll().forEach(tl => tl.kill()); }) //Re-init scrolltrigger in after hook barba.hooks.after(initTimeline); Thanks in advance! Cheers

Here's an example: https://www.azzerad.com/ For a month I've been trying to learn how to do nice page transitions which look seamless like on the page above. I am using the SPA framework Nuxt.js which has a lot of stuff for this kind of transition. However, I was never successful in utilizing it perfectly. Either my content loads way too fast and the curtain effect is not there or the routing doesn't work the way I want. I tried vue's navigation guards, nuxt loader component but without a good result. Of course, for animations, I use GSAP which should help the transitioning between pages easier. Let's say I click on the link, transition in the curtain, load the content behind and then transition out. This should be doable with the timeline I believe. Does anybody know how to nail this kind of page transition? I took a look at barba.js but that is basically the same as vue's transition hooks but still, I can't use it properly for the curtain.

Sure, you can rewrite it with gsap 3, check migration guide The similar examples you can find by chosing filter by Technologies on awwwards site, chose Barba.js, GSAP Animation, Highway.js... filters

@Jloafs I stumbled across this thread as I was having a similar issue. So what solved the issue for me was having an init() function run on both page load and the after hook. In this init function give each scrollTrigger an id relative to the section or functionality store those ids in an array then using the before hook loop through each id using `ScrollTrigger.getById(id)` and then run the kill() function Not tested the below code but should help understand what fixed my issue gsap.registerPlugin(ScrollTrigger); const prefix = 'className'; let triggerIDs; init(); function init() { const sections = document.querySelectorAll('sections'); triggerIDs = []; sections.forEach(function(element, index) { const ID = prefix + '__' + index; const tl = gsap.timeline({ scrollTrigger: { id: ID, markers: true, trigger: element, }, }) triggerIDs.push(ID) }); } barba.hooks.beforeLeave((data) => { triggerIDs.forEach(function(id) { ScrollTrigger.getById(id).kill(); }); }); barba.hooks.after((data) => { init(); });