Search the Community

Apologies in advance for the question that is more related to Barba.js than GSAP but you guys always point me in the right direction. I have researched different methods, but my JS knowledge is limited so I am not sure on what strategy to use. I want to do a simple page transition between two pages with separate JS files that have many GSAP timelines and event listeners. Ideally I would like to use the views / beforeEnter hook to re initialise my JS scripts, but I don't know how to do this. Or do I need to break up my JS files into functions and call them using hooks; I also have different JS files for mobile version so if it is possible to on page transition to load / run my JS files that would be ideal. barba.init({ views:[ { namespace: 'detail', beforeEnter(){ } } ], transitions: [ { name: 'general-transition-opacityfade', once({next}){ animationEnter(next.container) }, leave: ({current}) => animationLeave(current.container), enter({next}){ animationEnter(next.container); } }, { name: 'detail', to:{ namespace:['detail'] }, once({next}){ navigation1(next.container) }, leave: ({current}) => animationLeave(current.container), enter({next}){ navigation1(next.container); navin2(next.container); navin3(next.container); } } ] })

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.

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

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!

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

Welcome to the GreenSock forums! Glad you’re here. It’s a wonderful place to learn and get your questions answered. What topics can I post about here? We love answering questions that are directly related to GreenSock tools. API questions, bug reports, or if you’re wondering why GSAP behaves a certain way - those types of posts are welcome around here. What topics should be avoided? As much as we love solving problems, the following types of questions are beyond the scope of what we generally provide here for free: Logic issues. JavaScript and application logic, CSS setup, and generic troubleshooting that isn’t directly related to GreenSock tools. Third party tools. Frameworks (React, Angular), other JavaScript libraries (LocomotiveScroll, Barba), build tools, etc. We’re happy to help with the GSAP part of things if you strip out as much irrelevant code as possible and provide a minimal demo. “How do I do this cool effect I saw on a trendy website?” Someone here may point you in the right direction but please don't expect a full tutorial on how to create and effect you saw on a slick web site. Where else can I go for help? If your question is primarily about another tool, try looking for a forum or GitHub repository about that tool. If it’s a general programming-related question, try StackOverflow. Want feedback about your working code? We’d be glad to take a peek at GSAP-specific code but for more general topics (like performance or application logic) we’d suggest something like CodeReview. Read first Please read Getting Started with GSAP, common GSAP mistakes (maybe also common ScrollTrigger mistakes), as well as the GSAP docs before asking your question. Often you’ll get your question answered just by doing that! Make a minimal demo This helps provide context and gives us a rough idea of what you’re trying to accomplish. It's WAY better than trying to dig into a live website with lots of other things going on, or looking at a small excerpt of code without much context. Pro tip: It's often easier to create a minimal demo from scratch rather than stripping out irrelevant things from your original project. You will GREATLY increase your chances of getting a prompt answer if you create a minimal demo. After you've posted a demo to our forums, please click the "Fork" button on CodePen before making future changes so that context is not lost for future readers of the forum. Be courteous We try to treat people the way we’d want to be treated around here. Please do the same. Also keep in mind that the people answering your post are doing so for free! Most of our regular contributors gain nothing from helping you except the satisfaction of doing so. Please give them your gratitude and respect. Ask away! We’re eager to help, so make a minimal demo and ask your question! We’ll do our best to answer it promptly. Pay it forward - help someone else The best way to learn is to teach someone. You’d be surprised how much you grow when you try answering some questions here! We are so grateful for the group of volunteers dedicated to helping others in these forums. It’s quite satisfying to come alongside a fellow developer who is struggling and deliver a clever solution to their issue. Become a contributor! You do NOT need to be an expert. Anyone...and we do mean anyone...is welcome here.

Hey all, Unfortunately, I've tried to recreate this issue in Codepen, and it's just not working, so I'm linking the development environment for the site as well as a super-simplified version of our JS file for the site. The issue I'm running into is with ScrollSmoother interacting with barba.js. For anyone unfamiliar, Barba is an AJAX-based page transition library that loads new pages without a browser refresh in vanilla HTML/JS sites. You should be able to see the problem behavior in the dev environment - if you load the homepage fresh, ScrollSmoother inits and works fine. However, if you navigate to the History Page and then transition to the homepage via Barba by clicking the logo "Mining Exchange Hotel", the scroll on the page is super laggy, and running a performance profile, it appears to be related to a reflow issue originating in ScrollSmoother. Should I be trying to manage these two libraries together in a different way? You can see in the js file that currently, we're killing the smoother before the page transitions and re-initializing it before the new page enters, but the same behavior persists even if I comment those out and maintain the same smoother instance throughout all the page transitions. Thanks in advance for any help.

I am looking for a barba.js specialist. I am using this template for WordPress. http://imroma.com/themes/saonara/home-2 Animation template uses barba.js Locomotive Scroll is currently deployed to the template and generally works. But the bar doesn't refresh after page transition while barba is active. I'm looking for someone who knows how to implement a proper fix so that the Locomotive Scroll works differently when the barba is activated.

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!

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

Hi all. I've been trying to fix the bug for a couple of days now, searching the web for an answer, but nothing helps. The essence of the problem is as follows - after barba transition scrolltrigger markers does not move with locomotive scroll. I will throw my code below. Thank you in advance for your kind help in solving this bug! I will be grateful to everyone! app.js

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 my page: https://sharkleads.co/ im using gsap with barba js for page tranasitions. How can i achieve to noT transform logo in the page transition? So that the logo doesnt change shape. click on any link and you will se page transition. Html: <div id="layer-barba-transition"> <div class="logo-transition no-animation" style="translate: none; rotate: none; scale: none; transform: translate(0%, 100%) translate3d(0px, 0px, 0px);"> <svg width="148" height="67" viewBox="0 0 148 67" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.4402 29.6307C13.5416 29.6307 14.4365 29.562 15.1249 29.356C15.8132 29.1499 16.4328 28.9438 16.8458 28.6003C17.2588 28.2568 17.603 27.9133 17.7407 27.5011C17.8784 27.089 18.016 26.6081 18.016 26.0585C18.016 24.9594 17.4653 23.9976 16.4328 23.2419C15.4002 22.4863 13.5416 21.7306 10.9946 20.8375C9.8932 20.4254 8.72296 20.0132 7.62156 19.4636C6.52016 18.9827 5.4876 18.2958 4.59271 17.5401C3.69782 16.7844 2.94061 15.8227 2.38991 14.7235C1.8392 13.6244 1.56385 12.2504 1.56385 10.6704C1.56385 9.09038 1.8392 7.64774 2.45874 6.4112C3.07828 5.10596 3.90433 4.07551 5.00573 3.18245C6.10713 2.28939 7.41505 1.60242 8.99831 1.12154C10.5816 0.640661 12.3025 0.43457 14.23 0.43457C16.5704 0.43457 18.5667 0.709358 20.2188 1.19024C21.9398 1.67111 23.3165 2.22069 24.3491 2.83896L22.1463 8.95298C21.1826 8.47211 20.15 7.99123 18.9798 7.64774C17.8095 7.30426 16.3639 7.09817 14.7118 7.09817C12.8532 7.09817 11.5453 7.37296 10.7193 7.85383C9.8932 8.33471 9.48018 9.15907 9.48018 10.1895C9.48018 10.8078 9.61785 11.3574 9.8932 11.7696C10.1686 12.1817 10.5816 12.5939 11.1323 12.9374C11.683 13.2809 12.3025 13.6244 12.9909 13.8992C13.6793 14.1739 14.5053 14.4487 15.3314 14.7922C17.1211 15.4792 18.7044 16.0975 20.0123 16.7157C21.3202 17.334 22.4216 18.0897 23.3165 18.9827C24.2114 19.8071 24.831 20.8375 25.244 22.0054C25.657 23.1732 25.8635 24.5472 25.8635 26.1959C25.8635 29.4247 24.7621 31.8977 22.4905 33.6152C20.2188 35.4013 16.8458 36.2256 12.3025 36.2256C10.7881 36.2256 9.41134 36.157 8.17226 35.9509C6.93319 35.7448 5.83179 35.5387 4.9369 35.2639C3.97317 34.9891 3.21596 34.7143 2.52758 34.4395C1.83921 34.1647 1.2885 33.89 0.806641 33.6152L3.00944 27.5011C4.04201 28.0507 5.28108 28.5316 6.79551 29.0125C8.44761 29.4247 10.2374 29.6307 12.4402 29.6307Z" fill="#141414" /> <path d="M99.519 0.84668C104.682 0.84668 108.606 1.73974 111.359 3.59456C114.113 5.44937 115.489 8.26594 115.489 12.113C115.489 14.5174 114.939 16.5096 113.837 17.9522C112.736 19.3948 111.153 20.6314 109.019 21.5244C109.707 22.3488 110.464 23.3793 111.221 24.4784C111.979 25.5776 112.736 26.7454 113.493 27.9133C114.25 29.0811 114.939 30.3863 115.627 31.6916C116.315 32.9968 116.935 34.3021 117.554 35.5386H108.881C108.261 34.4395 107.642 33.2716 106.953 32.1038C106.265 30.9359 105.646 29.8368 104.957 28.7376C104.269 27.6385 103.58 26.608 102.961 25.6463C102.273 24.6845 101.653 23.7914 100.965 23.0358H97.1786V35.5386H89.4688V1.73974C91.1897 1.39625 92.9106 1.19016 94.7004 1.05277C96.4902 0.915376 98.0735 0.84668 99.519 0.84668ZM100.001 7.44158C99.4502 7.44158 98.9683 7.44158 98.4865 7.51028C98.0046 7.51028 97.5916 7.57897 97.2474 7.57897V16.8531H99.4502C102.341 16.8531 104.407 16.5096 105.714 15.7539C107.022 14.9982 107.573 13.8304 107.573 12.0443C107.573 10.3268 106.953 9.159 105.646 8.47203C104.338 7.78506 102.479 7.44158 100.001 7.44158Z" fill="#141414" /> <path d="M137.932 35.5385C137.243 34.4394 136.417 33.2028 135.453 31.8976C134.49 30.5924 133.526 29.2871 132.425 27.9819C131.323 26.6766 130.222 25.3714 128.983 24.2035C127.812 22.967 126.573 21.9366 125.403 20.9748V35.4698H117.693V1.25879H125.403V14.1051C127.399 12.0442 129.396 9.8459 131.461 7.5789C133.526 5.31191 135.385 3.1823 137.106 1.25879H146.261C143.92 4.00666 141.58 6.68584 139.24 9.29632C136.899 11.9068 134.421 14.4486 131.805 17.0591C134.559 19.3261 137.174 22.0739 139.721 25.1653C142.268 28.3254 144.747 31.7602 147.087 35.5385H137.932Z" fill="#141414" /> <path d="M47.6855 60.8187V65.6961H30.8203V40.4844H36.5338V60.8187H47.6855Z" fill="#141414" /> <path d="M47.3418 56.2847C47.3418 54.5672 47.6171 53.1246 48.099 51.8194C48.5809 50.5141 49.3381 49.4837 50.1641 48.6593C50.9902 47.8349 52.0227 47.148 53.1242 46.7358C54.2256 46.3236 55.3958 46.0488 56.566 46.0488C59.3195 46.0488 61.4535 46.8732 63.0368 48.5219C64.62 50.1706 65.3772 52.6437 65.3772 55.8725C65.3772 56.216 65.3772 56.5595 65.3772 56.9029C65.3772 57.2464 65.3084 57.5899 65.3084 57.9334H52.9176C53.0553 59.0325 53.5372 59.9256 54.5009 60.6126C55.4646 61.2995 56.6349 61.5743 58.2181 61.5743C59.2507 61.5743 60.2144 61.5056 61.1782 61.2995C62.1419 61.0934 62.8991 60.8874 63.5186 60.6126L64.2758 65.0092C64.0005 65.1466 63.5875 65.284 63.1056 65.4213C62.6237 65.5587 62.073 65.6961 61.4535 65.8335C60.834 65.9709 60.2144 66.0396 59.526 66.1083C58.8377 66.177 58.1493 66.2457 57.4609 66.2457C55.74 66.2457 54.2256 65.9709 52.9865 65.49C51.7474 65.0092 50.646 64.2535 49.8199 63.4291C48.9939 62.6048 48.3744 61.5056 47.9613 60.2691C47.5483 59.0325 47.3418 57.7273 47.3418 56.2847ZM60.1456 54.2238C60.1456 53.7429 60.0079 53.3307 59.9391 52.8498C59.8014 52.4376 59.5949 52.0255 59.3195 51.682C59.0442 51.3385 58.7 51.0637 58.287 50.8576C57.8739 50.6515 57.3232 50.5141 56.7037 50.5141C56.0842 50.5141 55.6023 50.6515 55.1204 50.8576C54.6386 51.0637 54.2944 51.3385 54.019 51.682C53.7437 52.0255 53.4683 52.4376 53.3307 52.8498C53.193 53.3307 53.0553 53.7429 52.9865 54.2238H60.1456Z" fill="#141414" /> <path d="M73.7068 46.0488C75.2901 46.0488 76.6668 46.2549 77.6994 46.5984C78.732 46.9419 79.6269 47.4915 80.2464 48.1784C80.8659 48.8654 81.3478 49.6898 81.6231 50.6515C81.8985 51.6133 82.0362 52.7124 82.0362 53.8803V65.1466C81.279 65.284 80.1776 65.49 78.8008 65.7648C77.424 65.9709 75.7031 66.1083 73.7757 66.1083C72.5366 66.1083 71.4352 65.9709 70.4026 65.7648C69.3701 65.5587 68.544 65.2153 67.7868 64.6657C67.0296 64.1161 66.4789 63.4978 66.1347 62.7422C65.7217 61.9178 65.584 60.9561 65.584 59.7882C65.584 58.6891 65.7905 57.7273 66.2724 56.9716C66.7542 56.216 67.3049 55.5977 68.0621 55.1168C68.8194 54.6359 69.6454 54.2925 70.678 54.0864C71.6417 53.8803 72.6743 53.7429 73.7068 53.7429C74.3952 53.7429 75.0147 53.7429 75.5654 53.8116C76.1161 53.8803 76.5292 53.949 76.8733 54.0177V53.5368C76.8733 52.6437 76.598 51.8881 76.0473 51.3385C75.4966 50.7889 74.5329 50.5141 73.1561 50.5141C72.2612 50.5141 71.2975 50.5828 70.4026 50.7202C69.5077 50.8576 68.7505 51.0637 68.0621 51.2698L67.3738 46.8732C67.7179 46.8045 68.0621 46.6671 68.544 46.5297C69.0259 46.3923 69.5077 46.3236 70.0584 46.2549C70.6091 46.1862 71.2287 46.1175 71.8482 46.0488C72.4677 46.1175 73.0873 46.0488 73.7068 46.0488ZM74.1887 61.9178C74.7394 61.9178 75.2212 61.9178 75.7031 61.9178C76.185 61.9178 76.598 61.8491 76.8733 61.7804V57.6586C76.6668 57.5899 76.3226 57.5899 75.9096 57.5212C75.4966 57.4525 75.0836 57.4525 74.6705 57.4525C74.1887 57.4525 73.7068 57.4525 73.225 57.5212C72.7431 57.5899 72.3989 57.7273 72.0547 57.8647C71.7105 58.0021 71.4352 58.2769 71.2287 58.5517C71.0222 58.8264 70.9533 59.2386 70.9533 59.6508C70.9533 60.4752 71.2287 61.0934 71.7794 61.4369C72.3989 61.7804 73.1561 61.9178 74.1887 61.9178Z" fill="#141414" /> <path d="M101.173 65.0781C100.691 65.2155 100.141 65.3529 99.5211 65.4902C98.9015 65.6276 98.2131 65.765 97.5248 65.8337C96.8364 65.9024 96.148 66.0398 95.3908 66.0398C94.7024 66.1085 94.0141 66.1085 93.3257 66.1085C91.7424 66.1085 90.3657 65.9024 89.0577 65.4215C87.7498 64.9407 86.7861 64.3224 85.8912 63.4293C85.0652 62.605 84.3768 61.5058 83.9638 60.2693C83.4819 59.0327 83.2754 57.6588 83.2754 56.1475C83.2754 54.5674 83.4819 53.1935 83.8261 51.957C84.2391 50.7204 84.7898 49.6213 85.4782 48.7969C86.1666 47.9725 87.1303 47.2856 88.1629 46.8047C89.1954 46.3238 90.4345 46.1177 91.8112 46.1177C92.5685 46.1177 93.2568 46.1864 93.8075 46.3238C94.4271 46.4612 94.9778 46.6673 95.5973 46.9421V38.355L101.035 37.4619V65.0781H101.173ZM88.9201 56.0101C88.9201 57.6588 89.2643 59.0327 90.0215 60.0632C90.7787 61.0936 91.8801 61.5745 93.3945 61.5745C93.8764 61.5745 94.3582 61.5745 94.7713 61.5058C95.1843 61.5058 95.5285 61.4371 95.8038 61.3684V51.5448C95.4596 51.3387 95.0466 51.1326 94.4959 50.9952C93.9452 50.8578 93.3945 50.7891 92.8438 50.7891C90.1591 50.7891 88.9201 52.5065 88.9201 56.0101Z" fill="#141414" /> <path d="M109.089 61.8498C110.121 61.8498 110.81 61.7811 111.223 61.575C111.636 61.3689 111.842 61.0254 111.842 60.4758C111.842 60.0636 111.567 59.6515 111.016 59.308C110.466 58.9645 109.64 58.621 108.607 58.2088C107.781 57.8653 106.955 57.5905 106.267 57.2471C105.578 56.9036 104.959 56.4914 104.477 56.0105C103.995 55.5296 103.651 54.9801 103.375 54.2931C103.1 53.6061 102.962 52.8505 102.962 51.9574C102.962 50.1713 103.651 48.7286 104.959 47.6982C106.267 46.6677 108.125 46.1182 110.466 46.1182C111.636 46.1182 112.737 46.2556 113.839 46.4616C114.871 46.6677 115.766 46.8738 116.386 47.1486L115.422 51.4078C114.802 51.2017 114.114 50.9956 113.357 50.8583C112.6 50.7209 111.774 50.5835 110.879 50.5835C109.158 50.5835 108.332 51.0643 108.332 52.0261C108.332 52.2322 108.332 52.4383 108.469 52.5757C108.607 52.7131 108.676 52.9192 108.882 53.0565C109.089 53.1939 109.433 53.4 109.777 53.6061C110.121 53.8122 110.603 54.0183 111.223 54.2244C112.393 54.6366 113.426 55.1175 114.183 55.5296C114.94 55.9418 115.56 56.4227 116.041 56.9036C116.523 57.3845 116.799 57.934 117.005 58.5523C117.212 59.1706 117.281 59.8575 117.281 60.6819C117.281 62.6054 116.592 63.9794 115.147 64.9411C113.701 65.9029 111.705 66.3837 109.089 66.3837C107.368 66.3837 105.991 66.2464 104.821 65.9716C103.72 65.6968 102.893 65.422 102.48 65.2159L103.375 60.8193C104.27 61.1628 105.234 61.5063 106.198 61.6437C107.161 61.7811 108.125 61.8498 109.089 61.8498Z" fill="#141414" /> <path d="M53.8799 35.5385H53.7422C53.7422 35.5385 54.4994 35.5385 55.532 35.3324V1.25879H47.7533V14.3799H34.8119V1.25879H27.0332V35.5385H34.743V20.9748H47.7533V35.5385H53.8799Z" fill="#141414" /> <path d="M86.2342 25.3027C85.064 22.1426 83.9626 19.1887 82.7923 16.4408C81.6221 13.6929 80.5895 11.0137 79.4881 8.54066C78.3867 6.06757 77.2853 3.59448 76.1839 1.25879H68.8183C67.6481 3.66318 66.5467 6.06757 65.4453 8.54066C64.3439 11.0137 63.2425 13.6929 62.1411 16.4408C61.0397 19.1887 59.8694 22.1426 58.6992 25.3027C57.5289 28.3941 56.3587 31.7602 55.0508 35.4011C56.634 35.1264 59.181 34.4394 60.6266 32.6533C69.1625 18.2269 81.9663 15.1356 81.9663 15.1356C78.5932 20.4939 78.3867 25.9897 78.3867 25.9897L76.7346 27.1575L78.3179 28.0506C78.2491 29.6306 78.3179 31.1419 78.4556 32.5159C78.9374 33.0655 79.6258 33.6837 80.5895 34.302C82.104 35.1951 83.5495 35.4698 84.7198 35.6072H89.9514C88.6435 31.8289 87.4045 28.3941 86.2342 25.3027Z" fill="#141414" /> </svg> </div> </div> JS: function pagetransition() { var tl = gsap.timeline(); // Set the initial scaleY of the inner logo to 1 gsap.set(".logo-transition", { scaleY: 1 }); tl.to("#layer-barba-transition", { duration: 0.9, scaleY: 1, transformOrigin: 'top', ease: Power3.easeInOut, }); // Add a delay to give time for the scaling animation to finish tl.add(delay(700), 0); // 700ms delay to match the scaleY animation duration // Scale the outer div to 0 tl.to("#layer-barba-transition", { duration: 0.7, scaleY: 0, transformOrigin: 'bottom', ease: Power3.easeInOut, delay: 0 }); // Set the scaleY of the inner logo back to 0 tl.set(".logo-transition", { scaleY: 0 }); } // Function to Delay function delay(n) { n = n || 1000; return new Promise(done => { setTimeout(() => { done(); }, n); }); } // Initial Content Animation function contentAnimation() { var tl = gsap.timeline(); tl.from(".left", { x: -200, y: 0, duration: 1, ease: Power3.easeInOut, opacity: 0 }); }

Hello, i have a question regarding GSAP and canvas. I have 2 divs, one is a loading screen and the other one is the page content, which includes 2 canvases. Im using Barba.js and GSAP to animate the loading screen, so that it slides out and the page content slides in. All of that works as expected, but when i check on mobile dimensions in the dev tools, suddenly after applying gsap, the canvas doesnt resize properly anymore to the windowsize. I tried wrapping the 2 canvases into a new div but no luck. I add a picture before and after applying gsap. transitions: [ { name: "loading-screen", to: { namespace: ["home"], }, once() { console.log("Transition 'loading-screen' is running."); gsap.to("#loading-screen", { x: "-100%", ease: "bounce", delay: 2, duration: 2.5, onComplete: function () { // Hide the loading screen once the animation is complete document.getElementById("loading-screen").style.display = "none"; }, }); gsap.from("#main-page", { x: "100%", ease: "bounce", delay: 2, duration: 2.5, }); gsap.from(".bg-video", { opacity: "0", ease: "power1.out", delay: 3.5, duration: 2, }); }, }, ], <body class="min-h-screen bg-white text-black" data-barba="wrapper"> <div class="wrapper" data-barba="container" data-barba-namespace="home"> <div id="loading-screen" class="absolute z-40 h-screen w-full bg-black text-right" > <h2 class="mr-8 mt-[200px] sm:mr-32"> <span class="animate-[counter_2s_linear_forwards] font-grenze text-[200px] text-textcolor2 [counter-set:_num_var(--num)] before:content-[counter(num)] lg:text-[280px]" ></span> <span class="font-grenze text-[50px] text-textcolor2 lg:text-[120px]" >%</span > </h2> </div> <div id="main-page" class="h-screen w-full"> <div class="threejswrapper"> <canvas class="webgl2 fixed left-2 z-10 outline-none sm:left-0" ></canvas> <canvas class="webgl fixed left-0 top-0 z-20 outline-none"></canvas> </div>

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, 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!

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': { } } })

I'm brand new to GSAP and Barba, I have got a basic page transition working with the two, however after the transition scroll trigger seems to break. I've been looking through the forum and see other users have very similar issue to what I have but I cannot find a solution. If either of the pages are accessed directly, scroll trigger works fine. However if either page is navigated to via the barba transition the scroll trigger doesn't work. Using barba views I appear to be able to get scripts to fire post transition, but I cannot work out how to get scroll trigger to reload. When I inspect the element after transition it looks like it's ready to be manipulated (has the inline transform style added to it), but it doesn't animate on scroll. I'm aware this may be a barba issue rather than a GSAP issue, but hopefully someone on the forum has come across this and can help. I have a very basic test pages at the moment (excuse the superfluous loading of every plugin!). First page is: <!DOCTYPE html> <!--[if lt IE 7]><html lang="en" class="lt-ie9 lt-ie8 lt-ie7 ie9"><![endif]--> <!--[if IE 7]><html lang="en" class="lt-ie9 lt-ie8 ie9"><![endif]--> <!--[if IE 8]><html lang="en" class="lt-ie9 ie9"><![endif]--> <!--[if IE 9]><html lang="en" class="ie9"><![endif]--> <!--[if gt IE 9]><!--><html lang="en"><!--<![endif]--> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>tester 1 - Contemporary Chandeliers</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="description" content="tester 1 Description"> <link href="/assets/css/ccc2021.css?1608457279" rel="stylesheet" type="text/css"> </head> <body data-barba="wrapper" class="" id="pageTop"> <div class="page"> <div class="stuck--top"> <h1>Don't want this to change</h1> </div><!--/.stuck--top--> <div class="barbaHolder"> <main data-barba="container" data-barba-namespace="tester"> <div class="container purple"> <h4>tester 01</h4> <p> <a href="tester2.php" title="Next">Go to Page Two</a> </p> <div class="box"> </div><!--/.box--> </div><!--container purple--> <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script> <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Object.assign%2CElement.prototype.append%2CNodeList.prototype.forEach%2CCustomEvent%2Csmoothscroll" crossorigin="anonymous"></script> <script src="https://unpkg.com/@barba/core"></script> <script src="/assets/js/locomotive-scroll.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/CSSRulePlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/Draggable.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/EaselPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/MotionPathPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/PixiPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/TextPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script> </main> </div><!--/.barbaHolder--> </div><!--/.page--> <script src="/assets/js/application.js"></script> </body> </html> Second page is basically the same apart from the link back: <!DOCTYPE html> <!--[if lt IE 7]><html lang="en" class="lt-ie9 lt-ie8 lt-ie7 ie9"><![endif]--> <!--[if IE 7]><html lang="en" class="lt-ie9 lt-ie8 ie9"><![endif]--> <!--[if IE 8]><html lang="en" class="lt-ie9 ie9"><![endif]--> <!--[if IE 9]><html lang="en" class="ie9"><![endif]--> <!--[if gt IE 9]><!--><html lang="en"><!--<![endif]--> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>tester 2 - Contemporary Chandeliers</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="description" content="tester 2 Description"> <link href="/assets/css/ccc2021.css?1608457279" rel="stylesheet" type="text/css"> </head> <body data-barba="wrapper" class="" id="pageTop"> <div class="page"> <div class="stuck--top"> <h1>Don't want this to change</h1> </div><!--/.stuck--top--> <div class="barbaHolder"> <main data-barba="container" data-barba-namespace="tester"> <div class="container purple"> <h4>tester 02</h4> <p> <a href="tester.php" title="Next">Go to Page One</a> </p> <div class="box"> </div><!--/.box--> </div><!--container purple--> <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js" crossorigin="anonymous"></script> <script nomodule src="https://polyfill.io/v3/polyfill.min.js?features=Object.assign%2CElement.prototype.append%2CNodeList.prototype.forEach%2CCustomEvent%2Csmoothscroll" crossorigin="anonymous"></script> <script src="https://unpkg.com/@barba/core"></script> <script src="/assets/js/locomotive-scroll.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/CSSRulePlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/Draggable.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/EaselPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/MotionPathPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/PixiPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/TextPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollToPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script> </main> </div><!--/.barbaHolder--> </div><!--/.page--> <script src="/assets/js/application.js"></script> </body> </html> The application js controlling the transition and scroll trigger is: /*PAGE TRANSITION*/ barba.init({ transitions: [{ name: 'opacity-transition', leave(data) { return gsap.to(data.current.container, { duration: 0.5, opacity: 0, y: '50px', }); }, enter(data) { gsap.from(data.next.container, { duration: 0.5, opacity: 0, x:'-50px', }); } }], views: [{ namespace: 'tester', beforeLeave(data) { alert('Leaving tester'); }, beforeEnter(data) { alert('Entering tester'); boxRoll(); } }] }); /*SCROLL TRIGGER*/ gsap.registerPlugin(ScrollTrigger); function boxRoll(){ const boxes = gsap.utils.toArray('.box'); boxes.forEach(box => { gsap.to(box, { scrollTrigger: { trigger: box, toggleActions: "restart", scrub: 0.5, id: 'boxRoll', }, rotate: 360, x: 350, }) }); } boxRoll();

I have a transitions I'm trying to perform that works. But when I change page I should reset my javascript but I can't. Someone to help me? Thanks My code: function delay(n){ n = n || 2000; return new Promise((done) => { setTimeout(() => { done(); }, n) }) } function pageTransition(){ let tl = gsap.timeline(); tl .to(fermerTest, {display:'none', duration:0.01}) .to(ouvrirTest, {display:'block'}, '<') .to('.loading-screen', { duration:1.2, height:"100%", top:'0%', ease:'Expo.easeInOut', },'<') .to('.loading-screen', { duration:1, height:"100%", top:"100%", ease:'Expo.easeInOut', delay:0.3, }) .to('.ul-navbar', { y:'-100%', duration:0.1, }, '-=0.90') .to('.deuxieme-slide', { y:'-100%', duration:0.1 }, '<'); } function contentAnimation(){ document.querySelector('body').classList.remove('overflow') document.querySelector('body').classList.remove('open')” } barba.hooks.enter(() => { window.scrollTo(0,0); }) barba.init({ sync:true, transitions:[{ async leave(data){ let done = this.async(); pageTransition(); await delay(1500); done(); }, async enter(data){ contentAnimation() }, async once(data){ contentAnimation() }, }], }) <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://kit.fontawesome.com/6434cb6a94.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="{{asset('css/style.css')}}"> <title>Martin Manderveld</title> </head> <body data-barba="wrapper"> <div class="load-container"> <div class="loading-screen"></div> </div> <div class="cursor"></div> <div class="scrollbar"></div> <div class="clickScrollbar"></div> <div class="div-loader"> <div class="div-gauche"> <div class="div-animation-loader"> <div class="rond-loader rond1"></div> <div class="rond-loader rond2"></div> <div class="rond-loader rond3"></div> <div class="rond-loader rond4"></div> </div> </div> </div> @include('partial/navbar') <div data-barba="container" data-barba-namespace="home-section"> @include('page/home') <div class="div-cache"> @include('page/about') @include('page/projet') @include('page/service') @include('page/contact') </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/@barba/core"></script> {{-- <script src="https://unpkg.com/@barba/core"></script> --}} <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script> <script class="main-script" src="{{asset('js/main.js')}}"></script> </body> </html>

Hi @Rodrigo, thanks for your response, appreciate your time, as ever! That makes sense. The ‘smoothness’ requires time for the ease, so to speak, which messes with the imperceptible jump. That’s how I felt - maybe I’m overlooking something, but I think it’s going to be tough this way because of the way the ScrollSmoother wrapper and container have to work. I’d go down the alternative observer route that’s been shown elsewhere in the forum, but the problem there is my production site uses barba.js across all pages. Without going into loads of detail (and forgive me if you’re already familiar) but that involves a barba container and wrapper similar to ScrollSmoother, except the barba wrapper sits within the smoother one, and each page has to be structured in the same way for barba to work properly. I’ve just realised while typing my waffle above that I could just leave the html structure the same and kill the ScrollSmoother via JS on just this horizontal scrolling page! That way I’m free to get my head around one of the observer infinite scroll approaches that provides its own smoothing, and then turn ScrollSmoother back on with a barba hook on page leave. Forgive me, I’m almost typing to myself there ha! You’ve helped get the cogs going and that does seem fairly simple, at least in theory. Thanks man.

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.

Hello, I can't make ScrollSmoother work with AJAX transitions using barba.js library. The problem is, that the ScrollSmoother isn't updating properly. It's not updating the content height, and the effects on new page won't apply. How should I approach it? Below are the basic functions I use, and the structure. I used it exactly the same with Locomotive Scroll, before I tried to move to GSAP solution. ScrollTrigger.refresh(); doesn't seem to do anything. I will appreciate your help. Thanks. <div id="site" data-barba="wrapper"> <div id="smooth-wrapper"> <div id="smooth-content"> <main data-barba="container"> <?php the_content(); ?> </main> </div> </div> </div> initScroll: () => { Site.smoother = ScrollSmoother.create({ wrapper: '#smooth-wrapper', content: '#smooth-content', smooth: 1.5, effects: true, smoothTouch: 0.1, }); }, initTransitions: () => { barba.init({ transitions: [ { name: 'default-transition', leave(data) { }, enter() { }, } ], }); barba.hooks.beforeLeave((data) => { }); barba.hooks.after((data) => { Site.reinit(); ScrollSmoother.scrollTop(0); ScrollTrigger.refresh(); }); },