Search the Community

Hi, You can watch this tutorial series by @Ihatetomatoes about using Barba and GSAP: Happy Tweening!

Hi there! I'm afraid that without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? No need to worry about NDA or 'sharing the project' - We don't need to see your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a working example using barba that you can start from. https://stackblitz.com/edit/web-platform-j6l93d?file=js%2Fmain.js Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

Hi there, I'm working on a project as a new freelancer. I've completed building a website for a project, but after finishing it, I realized I needed to add page transitions. For page transitions, I used barba.js and gsap.js. However, I'm currently learning barba.js and struggling with its correct usage. I consulted barba.js documentation and ChatGPT for help, and I've written code for page transitions that is working correctly in principle. However, the issue I'm facing is that after page transitions, some elements either duplicate in certain pages or disappear. I've spent a lot of time trying to understand this issue, but I'm unable to figure it out. I'm providing the barba.js code below, but I can't share the any demo or code of the website because, as mentioned, this is a freelance project. I hope you understand. Another thing, all functions like a1, a2, a3... are wrapped inside $(document).ready(function() {...}), and I cannot remove it from any section; otherwise, my animations won't work. So I have to use $(document).ready(function() {...}) or document.addEventListener("DOMContentLoaded", () => {...}) in any section/function I hope you understand my situation. This is a short demo for your understanding of what I mean by $(document).ready(function() {...}) or document.addEventListener("DOMContentLoaded", () => {...}) , /* ------------------------------- PAGE LOADER ------------------------------ */ function a2 (){ $(document).ready(function() { const Loadertimeline = gsap.timeline(); Loadertimeline.to(".loader-text span", { y: 100, stagger: 0.05, duration: 2, delay: 1, ease: "expo.inOut", // skewX: 50, }); Loadertimeline.to(".loader", { height: 0, duration: 1, delay: -1.3, ease: "expo.inOut", }); Loadertimeline.to(".loader-sec", { height: 0, duration: 1, delay: -1, ease: "expo.inOut", }); Loadertimeline.to(".loader-sec-1", { height: 0, duration: 1, delay: -0.9, ease: "expo.inOut", }); /* ------------------------------ HERO HEADING ------------------------------ */ new SplitType(".hero-headings-wrap h1", { types: "lines, words, chars", tagName: "span", }); Loadertimeline.from( ".hero-headings-wrap h1 .char", { y: "200%", duration: 1.5, ease: "circ.out", stagger: 0.02, delay: -0.8, }, "hero" ); Loadertimeline.from( ".hero-image", { height: "0rem", duration: 1.5, ease: "circ.out", }, "hero" ); document.querySelectorAll("nav *").forEach(function (navItem) { navItem.style.pointerEvents = "auto"; }); }); } /* -------------------------------------------------------------------------- */ /* WORK SECTION */ /* -------------------------------------------------------------------------- */ function a8(){ $(document).ready(function() { document.querySelectorAll(".project-image img").forEach((img, i) => { gsap.to(img, { y: "-15%", duration: 6, ease: "power1.inOut", scrollTrigger: { trigger: img, start: "top 150%", end: "bottom top", scrub: true, // markers: true }, }); }); }); }; Like that, And here is the barba.js code I wrote lastly: function initGsapAnimations() { a1(); a2(); a3(); a4(); a5(); a6(); a7(); a8(); a9(); a10(); a11(); a12(); a13(); a14(); a15(); a16(); a17(); a18(); a19(); a20(); a21(); a22(); a23(); a24(); a25(); a26(); a27(); } initGsapAnimations(); // Barba.js initialization document.addEventListener("DOMContentLoaded", () => { // Initial load animations and Lenis initialization initGsapAnimations(); initLenis(); // Initialize Barba.js barba.init({ transitions: [{ async leave(data) { const done = this.async(); // Animate out current page gsap.to(data.current.container, { opacity: 0, duration: 1, onComplete: done }); }, async enter(data) { // Animate in new page gsap.from(data.next.container, { opacity: 0, duration: 1 }); // Re-initialize GSAP, ScrollTrigger, Lenis or other scripts initGsapAnimations(); initLenis(); }, async once(data) { // This runs once when the page loads initGsapAnimations(); initLenis(); } }] }); }); Please help me fix this issue; I'm stuck because of this problem.

Strange I would have assumed it was routing between pages seeing as it's using barba.js https://barba.js.org/ That's the first place to start, GSAP can help you animate things, but barba (or a similar solution) is what you need to animate things between pages This example from the Barba docs shows how it works https://barba.js.org/docs/advanced/third-party/#Scroll-Trigger

Hi, This most likely has to do with cleanup after the transition is completed. I would loook into Barba's API, most specifically hooks and lifecycle in order to know exactly where to remove all GSAP & ScrollTrigger instances after the leave animation of the current view are completed and when the enter animation of the new view is completed to create the GSAP & ScrollTrigger instances. https://barba.js.org/docs/advanced/hooks/#Base-hooks https://barba.js.org/docs/getstarted/lifecycle/ Unfortunately I don't have any experience with Barba. On the other hand @Ihatetomatoes created a series of videos that integrates GSAP into Barba's transitions, so I would recommend you to check it out: Finally you could look into Stackblitz for creating a demo of your app so we can have a better look: https://stackblitz.com Hopefully this helps Happy Tweening!

Hi there, first of all, I don't know how to add multiple pages on CodePen, so I apologize for that. I'm currently learning Barba.js and trying to integrate GSAP into it after almost succeeding. However, I'm facing an issue where GSAP doesn't work after page transitions. Even I'm not sure about this matter. Also, my custom cursor isn't animating after page transitions, but it works fine if I reload the page. So I don't understand that whats going on there. Please guide me on this.🙁

There's a tutorial here which looks like it may be useful? https://webflow.com/made-in-webflow/website/barba-flip It is in webflow but it might have some useful tips?

Hi there! Yes this is 10000% a use for page transitions. I'm afraid I'm not super clued up on astro but you can do page transitions with something like barba.js or swup (also natively using the shared element transitions API, but that's only available in chrome) If I were you I'd work on the page transition first, then once you've got that sorted, fire it off using ScrollTrigger when you hit the bottom of a page.

Hello there, as OP mentioned, I understand this is a gsap forum but I can't seem to get an answer to this barba js problem. For context, Currently I have a base transition with gsap nothing too fancy and in the contact page a script to load a multistep form. I can't get barba to reload that script in that specific namespace 'contacto'. Anyone with any updated solutions? I've tried using views and hooks but nothing seems to be working. TLDR: init script everytime barba transitions to a this specific page.

With the help of Slater. app AI for Webflow, asking the right questing and mention the _align code that gave trouble, like you said Rodrigo - it came with a solution that did all the magic and it works perfectly now with no errors. Thank you for pointing me in the right direction. It was this code. barba.hooks.leave(() => { if (tween) { tween.kill(); } });

Hi, Maybe you can use GSAP Context to wrap all your GSAP instances in it's scope and revert that particular Context instance using one of the hooks Barba has, preferably one when the out animation is complete: https://gsap.com/docs/v3/GSAP/gsap.context() Happy Tweening!

Hi, That most likely stems from the fact that the path is not there when the _align method runs: https://github.com/greensock/GSAP/blob/master/src/MotionPathPlugin.js#L113 Be sure to check if the path is there when the code runs. Check if the barba transition has completed when this code runs so the DOM elements are actually there, especially the path you're targeting in your MotionPath config. Unfortunately without a minimal demo there is not a lot we can do to help. Happy Tweening!

Hi @JLernDesign, Have you looked into Barba.js along with its router plugin?

Hi, Nope, that's done with GSAP Context: https://gsap.com/docs/v3/GSAP/gsap.context() You can create your GSAP and ScrollTrigger instances inside a GSAP Context instance and then you can revert it, that will revert all the instances inside it which should help in this case. const ctx = gsap.context(() => { const tl = gsap.timeline({ scrollTrigger: { ... }, }); }); // Later in your code when you change routes ctx.revert(); // <- Cleanup! every GSAP instance is removed I'm not familiar at all with SWUP but it seems that is a library for page transitions like Barba. That should have some specific hooks in it's API like when the previous page animation is completed, that would be the moment to revert the GSAP Context Instance. I'm not 100% sure of what you mean with this, can you be more specific about what should happen and what is actually happening right now? Happy Tweening!

Hi, Seems to me that you're using some type of framework like Vue, Svelte, React, etc. or perhaps a transition library like Barba? This could stem from the fact that when you change pages you're not cleaning up/reverting the existing ScrollTrigger instance. In your video when you navigate to About you can see that while the transition is happening the markers are still there, then you go back to the main index route and you get a duplicated set of markers. On top of that it seems that somehow you're waiting for the content to load but when you go back the height of the hero section is not taking into account. You can see the markers at 12 seconds in your video are basically at the bottom of the nav bar element, which tells me that when ScrollTrigger does it's calculations, the element with the trash bag is right below that element and the hero is either not rendered yet or it doesn't have it's final height. That's all I can get from the live site and the video since your demo doesn't replicate the issue. Hopefully this helps. Happy Tweening!

Hi, On top of @mvaneijgen's suggestions you should take a look at this videos @Ihatetomatoes made about using GSAP in Barba transitions: Hopefully this helps. Happy Tweening!

Hi, There are almost 400 lines of JS in your index.html and I'm not really familiar with Barba to be honest so I don't know where to look for issues. Maybe you can watch these videos by @Ihatetomatoes where Petr goes into a lot of details on using Barba with GSAP: Hopefully this helps. Happy Tweening!

Hello im trying to get my barba.js to work and animate to different pages. When it goes to the second page it doesnt do anything. None of the buttons work either. Also I tried uploading to codepen but im not sure how to do multiple pages on there. here it is live and and git hub code

Hi, If you are loading the entire page maybe you're using some transition library like Barba or something like that? In that case you should kill the ScrollSmoother instance after the page has changed and create it again when the page loads again. Also this seems a bit wasteful IMHO: onUpdate: (self) => { var clipPathHeight = (1 - self.progress) * 100 + '%'; gsap.set('.gooey-container.page-progress .progress-fill', { clipPath: 'polygon(0 100%, 100% 100%, 100% ' + clipPathHeight + ', 0 ' + clipPathHeight + ')' }); }, If you want to do something like that, better create a ScrollTrigger instance that handles that particular animation instead of approaching it that way, is far better in terms of performance. Happy Tweening!

Hi, I have zero experience with Barba, but what I can tell you from creating transitions in frameworks like Vue and React is that you have to create your instances after the next route or page has been animated in. So when the animation out of the previous page is completed, you should kill/revert all your GSAP and ScrollTrigger instances. When the new page transition is completed, everything is in the position it should and all the styles added by the transition are removed (be careful here, we've seen some cases where the page transition animation adds some styles that then create issues with ScrollTrigger instances, especially if you apply transforms on a global wrapper and then you create a ScrollTrigger instance that pins something), then you can safely create your GSAP instances and ScrollTriggers. This is more a matter of when and not much what, as far as I can tell. Happy Tweening!

As I understand it, in barba js the house is updated between the afterEnter and after events In my case, in the afterEnter event, when we create the scrollTrigger again, the coordinates of the trigger block most likely did not correspond to the block coordinates, I think that this may be due to the fact that transition has negative coordinates, in order to trigger, as I understand it, you need to create an element in the after event. barba.hooks.after((data) => { switch (data.next.namespace) { case 'main': { let triggers = ScrollTrigger.getAll(); console.log(triggers); triggers.forEach(trigger => { trigger.kill(); }); scaleLogo = createScrollTrigger(); } case 'works': { } } })

Hi, Besides echoing the need of a minimal demo, my only suggestion would be to kill and then create the ScrollSmoother instance after the barba transition is completed, for example in the after callback. Something like this: after(data) { return new Promise((resolve) => { const timeline = gsap.timeline({ onComplete: () => { smoother.kill(); smoother = ScrollSmoother.create({ // Smoother config here }); resolve(); }}); timeline .to("#wipercontent", { opacity: 0, duration: 0.5 }) .to(".transoverlay", { y: "200vh", opacity: 0, duration: 0.5, display: "none" }) .set("#wipercontent", { opacity: 1 }) .set(".blslogo", { opacity: 0, display: "none" }); }); } You can create a minimal demo using Stackblitz's static HTML starter template: Hopefully this helps. Happy Tweening!

Good morning, I have smooth scroller active on a website, but it gets stuck after barba.js transitioning. I reviewed some older topics here, but even though I found many, I wasn't able to understand how to fix it. I understood that I need to "clean" and restart scrollSmoother/Trigger after transition, but then wasn't able to do it. This is my code. Could you please help? barba.init({ debug: true, sync: true, timeout: 10000, transitions: [{ name: 'opacity-transition', once(data) { document.addEventListener("DOMContentLoaded", function () { var tl = gsap.timeline(); tl .to(".transoverlay", { opacity: 0 }) .set(".transoverlay", { display: "none" }) .from('#masthead', { opacity: 0, y: 5 }, 4) .from('.fadein', { opacity: 0, y: 5 }); }); }, before(data) { return new Promise((resolve) => { const timeline = gsap.timeline({ onComplete: resolve }); timeline .set(".pageTitle", { display: "none" }) .set(".transoverlay", { top: "-100vh", opacity: 1, display: "flex" }) .to(".transoverlay", { y: "100vh", opacity: 1, duration: 0.5 }) .to(".blslogo", { display: "block", opacity: 1, duration: 0.5 }) .to(data.current.container, { opacity: 0 }, 0.2) .to(".nextPage", { display: "block", opacity: 1, duration: 0.2 }) .to(window, { scrollTo: { y: 0 } }); }); }, beforeEnter(data) { return new Promise((resolve) => { const barbaNamespace = data.next.container.getAttribute('data-barba-namespace'); const pageTitle = document.getElementById('wipertitle'); pageTitle.innerHTML = barbaNamespace; const timeline = gsap.timeline({ onComplete: resolve }); timeline .set("#wipertitle", { display: "block" }) .from("#wipertitle", { opacity: 0, y: 5, duration: 0.5 }) .set("#wipertitle", { display: "block", onComplete: resolve }, -0.5); }); }, enter(data) { return new Promise((resolve) => { const timeline = gsap.timeline({ onComplete: resolve }); timeline .to(data.next.container, { opacity: 1 }); }); }, after(data) { return new Promise((resolve) => { const timeline = gsap.timeline({ onComplete: resolve }); timeline .to("#wipercontent", { opacity: 0, duration: 0.5 }) .to(".transoverlay", { y: "200vh", opacity: 0, duration: 0.5, display: "none" }) .set("#wipercontent", { opacity: 1 }) .set(".blslogo", { opacity: 0, display: "none" }); }); } }] });

Hi, Petr (@Ihatetomatoes) made an entire collection of videos for using GSAP with Barba: Happy Tweening!

I'm facing a specific issue with the page transition animation (GSAP + Barba) on my website. The problem is occurring only on mobile browsers such as Safari on iPhone and Chrome on mobile devices. Test flow: scroll down the home page to the section with the black background and click on either link: "Conoce el estudio" or "Contacta" Problem Description: When transitioning between two pages, I've implemented an effect where the current page slides out to the left and the new page comes in from the right. During this transition, I apply an instant translateY to the elements of the current page based on the scroll position and use scrollTo to ensure the new page appears at the top. The code I'm using is as follows: barba.hooks.beforeEnter((data) => { const currentContainer = data.current.container const scrolledPixels = window.scrollY * -1 gsap.set(currentContainer, {y: scrolledPixels}) window.scrollTo({top: 0, left: 0, behavior: 'instant'}); }); On desktop browsers, everything works perfectly. However, on mobile devices, I experience a brief "flickering" or flash with the text elements during the transition. Usually, images remain static as expected, but the text seems to re-render, causing a brief flash of the top of the page before snapping back to the desired position. Has anyone faced a similar problem or has any suggestions on how to solve it? Any guidance or direction would be greatly appreciated. What I've Tried: TranslateY it in plain JS Disable force3d to prevent hardware acceleration. Disabling any other simultaneous animations or transitions. Optimizing the CSS, adding will-change and checking properties related to text rendering. Using requestAnimationFrame to synchronize animations. Intercept native scroll behavior with ScrollTrigger.normalizeScroll(true) None of the above solutions has resolved the issue. I'm aware that the question may not be 100% related to GSAP, but I just hope to find someone who knows what the magic trick is.