Search the Community

Hey everyone! I'm hoping this is considered a GSAP question rather than a Barba.js one. I've looked through this forum posts related to scrollTrigger and barba, which from I understand that scrollTriggers need to be killed off during barba transition then reinitiated after page transition. My environment is in WordPress and I'm getting no errors transitioning between pages. I've tried to simplify down what I'm using, so I hope this would be enough to troubleshoot... The below works, killing off all ScrollTriggers and then running "scrollFunction()". const cleanGSAP = () => { ScrollTrigger.getAll().forEach( t => t.kill(false) ) ScrollTrigger.refresh() window.dispatchEvent(new Event("resize")) } function delay(ms) { return new Promise( resolve => setTimeout(resolve, ms) ) } barba.init({ sync: true, transitions: [ { async leave(data) { const leaveDone = this.async() await delay(1000) leaveDone() }, async afterLeave(data) { cleanGSAP() }, async beforeEnter(data) { }, async enter(data) { $(window).scrollTop(0) }, async afterEnter(data) { }, async after(data) { //scrollFunction() this works //ScrollTrigger().refresh() this doesn't work } } ] }) function scrollFunction() { //gsap stuff here } My issue is the "scrollFunction()" is declared in another file and can't be moved to the file with the barba.js hooks. Replacing "scrollFunction()" with ScrollTrigger().refresh() in the after hook doesn't work or is this not how it's meant to be used? If not is there a global function that can innit all scrollTriggers? I'd appreciate and tips or help on this ? Cheers

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

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.

Hi there, I'm looking for help to complete a project - my freelance portfolio. It's a two-page framework I'm building to showcase my creative work. I'm seriously stuck - have been learning javascript, GSAP and now barba from scratch, and just can't seem to find a solution, despite reading through the amazing forum here and receiving some direct help. It's highly likely that I've not set up my timelines and ScrollTriggers fully as they should be! I've read and watched pretty much every tutorial out there about how to combine ScrollTrigger, Locoscroll and Barba, but can't figure out how and where to implement the necessary inits and kills to make sure that everything works as it should in combination. Here's the project so far: https://stackblitz.com/edit/web-platform-naq1gl?file=js/app.js The specifics of what I'm looking for: The timeline on the index page working fully The loader in and away transition working when link to subpage is clicked (no real issues here at this stage!) The subpage pinned sidebar timeline working on both first load (it only currently works after a manual page refresh) and subsequent loads as barba.js replaces the container in the DOM. Some brief annotations to explain what changes were made to the JS/hooks/views etc to get this functional. My budget for this is around $100 dollars, as I believe this fix isn't a big/long job for someone well-versed in these three libraries. Thanks in advance - I'd HUGELY appreciate a fix for this.

hello i have problem with transition animation and also text. 1.For page transitions I want it to appear from the bottom and disappear to the top, but when I press the button for a short time, the transition appears from top to bottom... 2.And for the fade in text animation I have the same problem, namely if I press the button quickly sometimes the last animation has not been completed, so the animation occurs twice. I want when the button is clicked the transition always appears bottom->up, and the text always from 0 to 1 opacity. This is my code https://codesandbox.io/s/elegant-sara-5wz41g

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!

Thanks. If it's okay to ask here - I don't know what it is I'm looking for? I really like GSAP, as the timeline approach really makes sense. But I sadly do end up with massive single HTML files. So, does barba.js work really well with GSAP, or - as I suspect? - are they two libraries that have nothing to do with each other? ie - I can't call or invoke or whatever a barba.js interpage animation from within a GSAP timeline? Basically - you're the guru, I'm just trying to figure out the best way to present small business client websites with engaging animation to keep the visitor "hooked" - relating the "small business" bit because they don't tend to have massive amounts of content. The problem with using only GSAP is that I end up with only one giant HTML page - whereas apparently with whatever barba.js is, I can have the multiple pages so that obnoxious Google and it's SEO can fill up the search engine with the separate about page, and the contact page - because that's what Google likes to do. And Google runs the Internet, so we must do whatever Google requires of us to the very best of our ability. From glancing at barba.js, it looks like it's doing what I've requested - animating between different HTML pages. So that's awesome. So what would you suggest? I'm currently obviously throwing a tantrum inside my head right now about how much I hate Google - but I'm making Google cry, so I'll stop that now? Are you relating that I likely need to learn barba.js to better achieve the goal I'm putting forward here? I wouldn't likely know that until I'd spent quite a bit of time experiementing with it - as, being a guru, you'd likely know off hand? On one hand, small business client that Google only indexes by a single HTML page. On the other hand, small business client that Google references with 5 or 6 pages. Based on Google indexing gazillions of pages - the difference between the 1 and the 6 shouldn't statistically matter? But, because it's only one, Google possibly decides to just ignore the site altogether? I have no idea? But I do know that Google refuses to index the site with the single index.html I referenced above.

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

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

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

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

Hi, i encounter a problem trying to use Locomotive Scroll and Barba, the pinned section is in wrong position on the initial load, but after going to next page and coming back it works fine. I've combined to demos that i found to show the problem. https://codesandbox.io/embed/smoosh-hill-qb6er4?fontsize=14&hidenavigation=1&theme=dark LE: By providing the demo i found out that resizing the window (in codesandbox) it works fine but i still don't know how to solve it. The actual question: how can i add ScrollTrigger.refresh() without resizing the window?

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.

Hi, As I mentioned I don't know anything about Barba and it seems to me that this is more related to when your code is executed and not what is executed. The fact that you have reported that your animations work in some situations is a clear indication of that. The main issue is that the elements are not in the DOM when the code runs, since you're not getting the console logs you're expecting. Once again, Barba is not a GSAP product and we can't offer full support for these type of situations since is not a GSAP related issue. In another thread I linked a collection of videos by @Ihatetomatoes where Peter shows how to use GSAP with Barba. Maybe you should use some time to watch them and perhaps catch what could be not working in your case. The only advice I could offer you now is to run your code in the enter hook, or perhaps try different combinations and check the Barba API for that. The point is when the transition animation starts and once the content of the previous page is not visible anymore, you should kill all your GSAP instances, that is what GSAP Context can do for you super easy, that's why I suggested it. Then once the new page is in place and the DOM structure is what you're expecting to be on that page, run all your GSAP code and put it in a GSAP Context instance for easy cleanup when you go to another route. This approach should work when you refresh as well. At this point I strongly suggest you to ditch GSAP entirely, yep that's right, forget about animations, ScrollTrigger and all that stuff and focus on when you have the DOM you expect to have so GSAP can do it's work. When you have that, then plug GSAP back in and finally when your GSAP animations are working as expected add ScrollTrigger in order to get your animations to be controlled by the scroll position. Good luck with your project! Happy Tweening!

I think maybe you're conflating two separate ideologies, but that is understandable. GSAP, at its core, is made to tween element property values (e.g. x, y, opacity, rotation, scale, etc.) between numerical values, and to manage sequences of tweens. That's sounds simple, but it's powerful! In essence, it can bring a web page to life; any/all of its elements at defined and calculated times, and at defined and calculated locations ... based on user interaction or all on its own. You can use GSAP (to tween out current page elements) in combination with your own custom JS to load remote page content, swap it in to the current page, change the browser's URL, and then again use GSAP to tween in the new elements. Or an logical sequence of tween current out, remote load, tween new in; e.g. load remote content into a local container and do simultaneous tween out/in. Barba.js is made to handle the transition states from one page to the other without a page reload in combination with an animation library ... for which I would highly recommend GSAP! From the Barba.js Docs Animation The important part for a good transition is animation. As Barba is not an animation library, you will need to import one in order to animate elements on the interface to create your transition. Have a look at the Barba.js docs, I think it's exactly what you're looking for. Shaun

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!

Hi ! I'm actually struggling - killing and resetting ScrollTrigger. Let me explain. I'm currently developping a website using ScrollTriger AND locomitive-scroll. I succeed making both working perfectly together, thanks to your example. But the thing is that my website is in ajax (Barba js), the first time i go to my page, every thing is alright but when I change and i come back, there is an error on the ScrollTrigger.refresh(). I tried : ScrollTrigger.kill(); ScrollTrigger.removeEventListener('refresh', () => locoScroll.update()); ScrollTrigger.removeEventListener('refreshInit'); Do you have any idea what am I doing wrong ? Thank you very much for your work !

Hi @Giovanny7 and welcome to the GreenSock forums! Unfortunately I have literally no experience with Locomotive and Barba so I can't really help you with this. Also both are not GSAP products/plugins so we don't have the bandwidth to give proper support for these tools. The one thing I see is that your codepen example is throwing this error when I try to scroll with the mouse wheel: Uncaught TypeError: Cannot read properties of undefined (reading 'length') Maybe create all your GSAP instances in the Barba callback as well, I mean wait for everything barba related to be completed to then create your GSAP and Locomotive code. There are more than a few examples of using ScrollTrigger with Locomotive so my main suspect is Barba and when exactly your code is running. Sorry I can't be of more assistance. Happy Tweening!

I think the reason for why it doesn't work properly after a page-transition, boils down to the fact, that for a certain period of time within barba's lifecycle, both, the old and the new container will live together in the DOM. Now while you are initiating your new locomotive-scroll instance everytime with reference to the new barba-container, your scrollerProxy is only being created with reference to '.smooth-scroll', which will be available in both, the old and new container at that time - and since the old container sits above the new in the DOM tree at that time, you will be referencing the old container's .smooth-scroll with that. You can check the difference between the two elements you are targetting by logging out console.log(smoothScroll.parentElement.getAttribute('data-barba-namespace')) vs. console.log(document.querySelector('.smooth-scroll').parentElement.getAttribute('data-barba-namespace')) in your initSmoothScroll function. So you can either simply just change the element you are targetting in your scrollerProxy to be the same you are targetting when creating your locomotive-scroll instance, or alternatively just remove the old barba-container at the proper time since you don't need it for your type of page-transition anyway. Both options resolved things for me. Hope they do for you, too. Thanks for the heads-up btw @Cassie - was scratching my head for a minute or two there, before I saw that.

Heyo! If I am not absolutely wrong, using a timeline vs using a single tween really shouldn't make a difference in this case. Here is your codepen (with GSAP and ScrollTrigger loaded now) working and not automatically tweening - even with the start set to '+=1' as you have on your website @sbme123, which btw is an invalid value for the start because starts of ScrollTriggers can not be relative values (what should they be relative to ?). Edit: I had another look at your website and it looks like now you are not loading ScrollTrigger there, which would be an explanation for the auto-tweening when getting to that page you mentioned. Everything I mentioned below doesn't become less important to know when working with barba, though. https://codepen.io/akapowl/pen/GRGEMeW One very important piece of the puzzle you forgot to mention is, that you are using barba.js - which I bet is the cause of your issues. There are a lot of things to consider when using JS with a framework that makes your website behave like a Single-Page-Application. The most important with barba being a) kill old ScrollTriggers when leaving a 'page' and (re-) initialize ScrollTriggers when entering a new 'page' b) be aware of barba's life-cycle, because at some point (if not explicitly changed by yourself) the old and new page-containers will be in the DOM at the same time stacked on top of each other, which is bound to throw off the calculations for initiated ScrollTriggers I linked a couple of threads below, which have some critical information for the use of barba with ScrollTrigger. Also, I tweaked an example I made on stackblitz earlier to show a way to properly integrate that fake-horizontal scenario. Although it is kind of convoluted by now (which to a certain extent is neccessary due to the way barba works), I hope it will still help. https://stackblitz.com/edit/web-platform-tffdg2

hi, my plan is to play barba.js page layers transition first - and - then animation for a svg logo. but both are start at a time, have tried delay options, but it's not working. or another option i am trying too.. first logo animation plays - and - then the page layer transition.

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!

Hi everyone, So i'm using gsap splittext plugin to split sentence into words and lines and then animating words. Everything works fine on first load of a page but when i'm navigating to different page and then get back something weird happens and sentence breaks only on last word. We are using gsap with barba js. Here is the demo of a problem, also i tried to replicate problem on codepen but it is lot of work to integrate barba there to make it more accurate. Screen Recording 2021-08-17 at 12.23.45.mov Here is how it looks when it's inspected Sometimes it works as expected, but most of the time it breaks and breaks

When I enter the main page (index.html) and navigate to the work page everything works as expected. But once I refresh the page in the workpage and not the initial page everything stops working -- what could be the reason for this? I've tried refreshing animations in the barbajs code and it seems that it doesn't work even with the usage of Barba views to reinitialize the animations explicitly. // Main Scripts function initScripts() { initNavAnimations(); initMagneticButtons(); initButtonsAnimations(); initHomeAnimations(); //initWorkPageAnimations() --> it used to be here but I'm now calling it specifically on the barba view to see if something works. } // NOTE: data.next = current container barba.init({ sync: true, timeout: 7000, debug: true, // !IMPORTANT views: [{ // THIS IS WHERE I'M CALLING MANUALLY BUT NOTHING STILL WORKS 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()); 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(); }, }] }) The entire code can be found here you may fork my project and use liveserver: https://github.com/officialgio/officialgio.github.io

Hi, I have zero experience with Barba so I'm not sure at how I should be looking in your example, which has some errors because you have some relative paths to some image files. Try replacing those with some unsplash links or something like that. Basically what could be the problem here is that you refresh your work page and when the code runs something definitely is not working as expected. You should have markers in your development environment in order to see what happens there, also use the console and debugger in order to see what's happening. The hooks from Barba are running when the page is refreshed? Are you 100% sure that this condition meets when you refresh the page? if (document.body.id === 'first-page') { } Your work.html has this: <body id="work-page" data-barba="wrapper"> Finally you have this in your initWorkAnimations method: const texts = gsap.utils.toArray('anim'); That selector is not pointing towards any class, ID or any other attribute of an HTML tag. You do have some elements with an anim class in your page so you should add the dot to that. Hopefully this helps. Happy Tweening!