Search the Community

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

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

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?

Hi again! I've uploaded it to github at https://github.com/StudioProjects/barba also to Stackblitz at https://stackblitz.com/edit/web-platform-n7jjbk?file=index.html A huge thanks again for your valuable time in helping me with this! It's about time that I started using github, I've got a couple of hundred small projects and websites from when I was a Flash Dev 15 years ago...I've just returned to coding after an 11 year break and pretty much had to start from scratch over the last 12 months! My 57 year old brain is a bit overwhelmed, but I've made good progress Andy

Hi TheHaus! Thanks so much for your super quick response! I've changed to the new minified core, but the same problem applies, although its now changing to the projects.html page rather than the about.html page! I've uploaded it to https://www.frontenddevelopment.com.au/barba - you should now see a working css hamburger menu, rather than the white box, if not, please clear your cache. Andy

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 !

I have a background of outer space that is made of js particles with general divs of content on top of it (logo,h1,h2) When a button is click and or scroll is initiated, I want the background to quickly move into warp speed (like this) and blur the content and move and load the next page. I plan on using https://barba.js.org/ for the page transition but am new to GSAP and not sure how to achieve this otherwise. Should I recreate the stars background using GSAP and then animate the warp speed or can I use existing particle js? I really am not sure how to go about this so any suggestions or guide would be greatly appreciated. Thanks so much in advance and please let me know if you need anything to help answer.

Am I getting you right, you already have the Warp stuff (no gsap as far as I can see) and you plan on using barba for the page transition, so the only thing you are missing now is blurring the headline(s)? A little CSS filter should do that trick, as great as GSAP is, I don't see why you would add it in this case, if all you need from it is a blur. But maybe I'm misunderstanding you.

Let's work together to clarify a few things... I don't think anyone is faulting you, @joxd, for pointing out that the user-created demo isn't fully responsive. Resizing screens appears to cause it to render oddly. Perhaps we haven't acknowledged that adequately and you didn't feel heard. We are not Three.js experts here. Most (if not all) of the issues here are related to rendering, so it's really not in our wheelhouse. We're not in a position to dig in, learn Three.js and fix some else's demo for them to make it fully responsive. But we're happy to answer any GSAP-specific questions. It may not be obvious to you from your experience in this particular thread, but this community bends over backwards to help users around here and we spend hours and hours every day trying to keep up with the constant stream of posts. It can be overwhelming, especially when so many of them end up having very little to do with GSAP. Quite a few people basically expect us to provide free general consulting services and do their development work for them or solve logic issues in their code...and they often won't even bother to provide a clear minimal demo. These forums cost thousands of dollars every month to operate, so we have to draw boundaries somewhere. We get questions that are specific to Three.js, React, Vue, Angular, Next, Nuxt, Barba, Pixi, Swiper, LocomotiveScroll, ASScroll, ScrollBar, WordPress, Elementor, and Svelte, just to name a few. We simply cannot learn all of those tools and provide full support. I'm sorry if my initial boundary-setting post came off as rude or unwelcoming. I definitely didn't mean it that way. Though you probably didn't mean it this way, your responses have come across as very disrespectful and insulting. It sounds like you felt similarly about some responses you got. So everyone got a little offended and salty here. Let's just put an end to that and give each other the benefit of the doubt. Thanks for being a customer back in 2017. We sure appreciate that. We couldn't do what we do without the support of Club GreenSock members. As a company, we place a HUGE amount of value on earning trust and treating customers with respect. One of the biggest ways we try to be there for our users is via these forums. We hear over and over again about how special this place is, how it is warm and welcoming, etc. It has taken years of very intentional effort to cultivate that. We don't have big marketing budgets or corporate sponsors - we simply focus our efforts on creating the best tools we can and supporting them well, trusting that the market will reward the efforts. Again, I'm sorry if your experience didn't reflect that. Let us know what it'd take to right the ship in your eyes. If you still think there's a GSAP problem at play here, how about if you create a minimal demo that doesn't use Three.js and only focuses on the animation-related challenge instead? I'd be glad to look at that and provide advice.

Omg thanks for this @akapowl and @mdelp , this is exactly what I was looking for . Thanks so much didn't see these responses until now. Now unfortunately I have a new problem and it's either with Barba or Gsap ScrollTrigger itself I have no clue . So in my website , when I go from the homepage to the about page everything works as normal except the horizontal scroll part that I have put in (Facts Section) , thing is I do this very same action on mobile and it works perfectly sometimes and then other times it does the same as it does with the Desktop Version , so it's either my code and the way I have implemented the horizontal scroll but thing is when I go directly to the page as in not through the homepage and just initiate all the functions in about.js independently , everything including the horizontal scroll works as desired and perfectly , so I don't know which is causing the problem , could ye have a look maybe ?? Also I just have a few questions about your code above @mdelp , You define the function barbaInit() but where is this called and when ?? , also are those anim_about_in() and other view specific functions your initializers for the page or just animating the page in?? . Just want to clarify aswell , like i mentioned above if someone clicks a link that loads the about page again or something or goes directly to the about page the Barba animations are gone so therefore if you're reliant on Barba to initialize your scripts upon that specific page load then your scripts are not going to be initialized so do you call them independently like above in their seperate JS files too?? Last thing I want to clarify if i have a seperate stylesheet for each page , do I even need to include it in the seperate pages( about etc) as they will be redundant if barba is just gonna use my homepage as the one page for my application so would I be better off loading in all my stylesheets for all my seperate pages on the homepage or just put them to load in dynamically once the view with namespace ?? occurs??. So here is my homepage.js (Barba Init code) //Variable Declarations and Function Definitions let viewBox = "" heading_Pos = [0, 0] displayState = "" hamburger_display_button = Array.from($('.mobile_nav_sticky'))[0] opened_nav_buttons = document.querySelector('.options') logo = $(".Actual_Logo_Svg") // Morphing Circles and ellipses to paths to be able to morph them and checking the viewbox for device size MorphSVGPlugin.convertToPath("ellipse"); shapes = Array.from($('.Logo_In_Shapes path')) const homeInit = () => { viewBox = "", heading_Pos = [0, 0], displayState = "" hamburger_display_button = Array.from($('.mobile_nav_sticky'))[0] opened_nav_buttons = document.querySelector('.options') logo = $(".Actual_Logo_Svg"); // Morphing Circles and ellipses to paths to be able to morph them and checking the viewbox for device size MorphSVGPlugin.convertToPath("ellipse"); shapes = Array.from($('.Logo_In_Shapes path')) } const logo_tl_func = () => { let logo_tl = gsap.timeline({ onComplete: moveLogo, }) // Morphing into the Logo logo_tl.from(shapes, 1, { y: -600, autoAlpha: 0, ease: "bounce", stagger: 0.15 }) logo_tl.to(shapes, 1, { fill: '#F0C368', stagger: 0.05 }) let firstAnimation = gsap.to('.shapes', { duration: 2, morphSVG: ".Logo_Proper_Background" }); let secondAnimation = gsap.to('.textShape', { duration: 2, fill: '#1D373F', morphSVG: ".Logo_Proper_Text" }); logo_tl.add([firstAnimation, secondAnimation]) } const changeViewBox = media_query => { media_query.matches ? viewBox = "-150 -180 2495 890" : viewBox = "-150 -350 3574 880" media_query.matches ? heading_Pos = [-511, -15] : heading_Pos = [-1540, 40]; media_query.matches ? displayState = "none" : displayState = "block" } const moveLogo = () => { gsap.to(logo, { attr: { viewBox: viewBox }, duration: 3 }) fadeInHeadingAndLinks(); } const fadeInHeadingAndLinks = () => { gsap.to('.nav_links', { display: displayState, scale: 1, duration: 3 }) gsap.to('.logo_heading', { display: "block", x: heading_Pos[0], y: heading_Pos[1], // scale:1, duration: 3 }) gsap.to('.mobile_nav_sticky', { display: "block", scale: 1, duration: 5 }, "+=.7") } const pageTransition = () => { var tl = gsap.timeline(); tl.set('.loading_container img', { scale: 0.3 }) tl.to('.loading_container', { duration: 1.2, width: "100%", left: "0%", ease: "circ.out", }) .to('.loading_container img', { scale: 0.6, duration: 1 }, "-=1.2") .to('.loading_container', { duration: 1.2, width: "0%", right: "0%", ease: "circ.out", }) .to('.loading_container img', { scale: 0.3, duration: 1.2 }, "-=1.3") } // Helper Functions const delay = (ms) => { return new Promise(resolve => setTimeout(resolve, ms)); } // Initialization Methods $(document).ready(() => { window.matchMedia("(max-width: 600px)").matches ? logo.attr('viewBox', '-350 -700 1274 1680') : logo.attr('viewBox', '-680 -380 2074 1080') var viewbox = window.matchMedia("(max-width: 600px)") changeViewBox(viewbox) }) hamburger_display_button.onclick = () => { opened_nav_buttons.classList.toggle('open') } barba.init({ sync: true, transitions: [{ name: 'transition-base', preventRunning: true, timeout: 5000, async leave() { const done = this.async(); pageTransition(); await delay(1000); done(); }, async enter() { window.scrollTo(0, 0); }, }], views: [ { namespace: 'home', afterEnter() { homeInit() window.matchMedia("(max-width: 600px)").matches ? logo.attr('viewBox', '-350 -700 1274 1680') : logo.attr('viewBox', '-680 -380 2074 1080') let viewbox = window.matchMedia("(max-width: 600px)") changeViewBox(viewbox) logo_tl_func(); hamburger_display_button.onclick = () => { opened_nav_buttons.classList.toggle('open') } }, }, { namespace: 'about', afterEnter() { aboutInit() face_tl_func() scroll_p_tl_func() scroll_skills_tl_func() scroll_facts_tl_func() }, } ], }); // //Global Hooks // barba.hooks.leave(() => { // const done = this.async(); // pageTransition(); // await delay(1000); // done(); // }) // barba.hooks.enter(() => { // window.scrollTo(0, 0); // }) and here's my about.js // Variable Declarations and Function Definitions let factsContainer_sm = document.querySelector(".factsContainer_sm") const aboutInit =() => { factsContainer_sm = document.querySelector(".factsContainer_sm") let head = document.getElementsByTagName('head')[0], link = document.createElement('link') link.rel = 'stylesheet' link.href= "../../Resources/CSS/about.css" head.appendChild(link); } const face_tl_func = () => { let face_tl = gsap.timeline(), paths = document.querySelectorAll('.My_Face path'), filledYellowElements = ['.Main_Hair_Part', '.Eyeball_2', '.Eyeball_1', '.Nostril_1', '.Nostril_2', '.Tongue_Part'], filledNavyElements = ['.Pupil_2', '.Pupil_1']; face_tl.set(filledNavyElements, { fill: 'unset' }), face_tl.set(filledYellowElements, { fill: 'unset' }), face_tl.fromTo(paths, { drawSVG: "0%" }, { duration: 1, drawSVG: "100% ", stagger: 0.15 }) let firstAnimation = gsap.to(filledYellowElements, { duration: 2, ease: "slow", fill: '#F0C368' }, "-=.7"), secondAnimation = gsap.to(filledNavyElements, { duration: 2, ease: "bounce", fill: '#1D373F' }, "-=.7") face_tl.add([firstAnimation, secondAnimation]) } const scroll_p_tl_func = () => { let scroll_tl = gsap.timeline({ scrollTrigger: { trigger: '.content', start: "top center", end: "+=1000", markers: true, scrub: true // pin: true } }) scroll_tl.to('.first', { transform: "rotateX(50deg) rotateZ(331deg) translateX(42px)", duration: .5, }), scroll_tl.to('.flag', { scale: 1 }, '-=.1'), scroll_tl.addLabel("first_down") scroll_tl.to('.second', { transform: "rotateX(50deg) rotateZ(331deg) translateX(42px)", duration: 2, }, "first_down-=.1") scroll_tl.addLabel("second_down") scroll_tl.to('.third', { transform: "rotateX(50deg) rotateZ(331deg) translateX(42px)", duration: 2, }, "second_down-=.01") } const scroll_skills_tl_func = () => { let scroll_tl = gsap.timeline({ scrollTrigger: { trigger: '.skillsContainer', start: "top center", markers: true, } }), barWidth = "", bars = [...document.querySelectorAll('.bar')] bars.map(bar => { barWidth = bar.dataset.width; let barAnimation = gsap.to(bar, { width: barWidth, }), percentageAniamtion = gsap.to('.percentage', { scale: 1, }) scroll_tl.add([barAnimation, percentageAniamtion]); }) } const scroll_facts_tl_func = () => { let scroll_tl = gsap.timeline({ scrollTrigger: { trigger: '.factsContainer', start: "top center", // pin: true, scrub: true, end: "+=300", markers: true, } }), facts = [...document.querySelectorAll('.fact')] scroll_tl.to('.factsContainer h2', { scale: 1.5, duration: 1, ease: "slow" }) scroll_tl.to(facts, { xPercent: -85 * (facts.length - 1), scrollTrigger: { trigger: ".factsContainer_sm", start: "center center", pin: true, // pinSpacing:false, markers: true, scrub: 1, snap: 1 / (facts.length - 1), // base vertical scrolling on how wide the container is so it feels more natural. end: () => `+=${factsContainer_sm.offsetWidth}` } }); } // //Initialization Methods aboutInit() face_tl_func() scroll_p_tl_func() scroll_skills_tl_func() scroll_facts_tl_func() Here's the website homepage - https://adamoceallaigh.netlify.app/ Here's the about page - https://adamoceallaigh.netlify.app/about.html Appreciate all the help ye can give , if ye can , can ye check both mobile and desktop versions. 🤙 Cheers Adam

@adamoc I'll just dump my Barba code here, maybe it can be of use to anyone. Please note that I'm not using ES6 syntax, so I've used slightly other syntax than the Barba docs. function barbaInit() { barba.hooks.afterLeave(function() { $('.c-slider__slides').slick('unslick'); $('.c-slider-large__slides').slick('unslick'); $('.c-slider-multiple__slides').slick('unslick'); }); barba.hooks.beforeEnter(function() { lazyloadInstance.update(); }); barba.hooks.afterEnter(function() { scrollItems(); smoothScroll(); rotator(); sliderProjects(); sliderLarge(); sliderMultiple(); }); barba.hooks.after(function() { ga('set', 'page', window.location.pathname); ga('send', 'pageview'); }); barba.init({ transitions: [{ name: 'transition-base', preventRunning: true, timeout: 5000, // default: 2000 leave: function() { var done = this.async(); if( $('.c-hamburger').hasClass('is-active') ) { $('.r-header, .hamburger, .c-hamburger').removeClass('is-active'); gsap.to('.overlay', {left: 0, duration: 0.75, ease: 'cubicbezier', onComplete: done}); } else { gsap.to('.overlay', {left: 0, duration: 0.75, ease: 'cubicbezier', onComplete: done}); } }, enter: function(data) { var done = this.async(); // Rewind the navigation overlay to start tl_nav_master.pause(0); // Scroll out the transition overlay gsap.to('.overlay', {left: '100%', duration: 0.75, delay: 0.25, ease: 'cubicbezier', clearProps: 'all'}); // Scroll the viewport back to the top before page transition $(window).scrollTop(0); done(); }, }], views: [{ namespace: 'home', afterEnter() { anim_home_in(); }, }, { namespace: 'project', afterEnter() { anim_project_in(); }, }, { namespace: 'about', afterEnter() { anim_about_in(); }, }, { namespace: 'services', afterEnter() { anim_services_in(); }, }, { namespace: 'service', afterEnter() { anim_service_in(); }, }], }); } The global hooks at the top are hooks that need to fire every page transition. Then I have a base transition between all pages. And finally I have views that contain the animation that specifically need to run when a page enters the namespace with data-barba-namespace="home".

Oh wait - just saw the sentence below the bolded one. Can you pop together a minimal demo for us? Don't worry about barba and all the rest - just a simple codepen with some coloured boxes, toggling a class and playing a flip animation. Thanks!

Hello GSAP Heroes, I'm facing an issues with scrolling. I've a navbar with multiple links. Index page is scrolling fine without issues, but when I clicked on navbar item it redirects to the page but that page doesn't scroll until I refresh it. I don't know what to do. I've used gsap, locomotive scroll and barba js.

Hi, I have developed a new film site, https://vineethachari.cloudvent.net/test/work1.html that incorporates all these plugins (Barba.js/Locomotive/GSAP/ScrollTrigger). The ScrollTrigger JS at the above mentioned URL is commented out as of now. Because, enabling ScrollTriggerJS does not achieve the following section effects. Could someone please help me find a solution to this, as I still have facing some issues with plugins.

This way you would only be creating new instances over and over again, whenever you transition between pages - because you never kill or destroy the old instances - the same goes for the smooth-scrollbar in your initial demo. For killing off old ScrollTriggers you could use a function that contains this let triggers = ScrollTrigger.getAll(); triggers.forEach( trigger => { trigger.kill(); }); preferably in a global hook of barba. A way to destroy the old smooth-scrollbar could be to use Scrollbar.destroy(scrollBar); alongside my example of how to set it up in the first place. I personally use the beforeEnter global-hook to destroy old instances (because in the following enter-hook I remove the current.container of barba) and the afterEnter global hook to initiate new instances barba.hooks.beforeEnter(({ current, next }) => { var beforeEnterPromiseAll = new Promise(function (resolve) { killOldScrollTriggers(); destroySmoothScrollbar(); resolve(); }); return beforeEnterPromiseAll; }); barba.hooks.enter(({ current, next }) => { var enterPromiseAll = new Promise(function (resolve) { current.container.remove(); resolve(); }); return enterPromiseAll; }); barba.hooks.afterEnter(({ current, next }) => { var afterEnterPromiseAll = new Promise(function (resolve) { initSmoothScrollbar(); initScrollTriggers(); resolve(); }); return afterEnterPromiseAll; }); Depending on your set-up and how exactly you want things to work, you'd have to find a way of your own for this. There is no real one-type-fits-all solution. If you search the forum for 'barba' you will find quite a few other recent threads on that topic.

Sorry for the misunderstanding: What I was referring to was the part of killing off the old ScrollTriggers before/when transitioning and having to create them from scratch when the content of the new page has loaded. Otherwise ScrollTrigger might not have the correct dimensions to work with. "You will have to kill off the old ScrollTriggers in a barba hook when transitioning to another page, and create all neccessary ScrollTriggers for the next page from scratch after transitioning. You will find examples on how to do that and some more explanation on the why in the threads below." Did you try that? Actually It shouldn't make a difference wether or not your footer is also transitioning, because when the content (which is transitioning) above the footer has different dimensions (meaning height) than it had before transitioning, the position of the footer on the page will be different, thus ScrollTrigger will have the wrong data to work with. I forked your project and put together a quick and dirty example of that - but I will have to delete it again. So please take a look at it and let me know if this works for you, so I can go ahead and delete it again. https://codepen.io/akapowl/project/editor/c60c063115038852cb22145bb95bbe1e What I did here was 1) to put the creation of the ScrollTrigger into a function and call it immediately so it is working on page load. function initScrollTriggers() { gsap.set('.footer-container', { yPercent: -50 }) const uncover = gsap.timeline({ paused:true }) uncover.to('.footer-container', { yPercent: 0, ease: 'none' }); ScrollTrigger.create({ trigger: 'main', // markers: true, start: 'bottom bottom', end: '+=95%', animation: uncover, scrub: true, }) // uncover.restart(); console.log('ST Initiated') } initScrollTriggers(); 2) I added a barba.hook for afterLeave in which I kill off all ScrollTriggers barba.hooks.afterLeave((data) => { let triggers = ScrollTrigger.getAll(); triggers.forEach( trigger => { trigger.kill(); }); console.log('ST Killed') }); and 3) In an onComplete-callback of your fading in transition (the after) I call that function that creates the ScrollTrigger again - done here to make sure that all layout-shifting is finished before re-applying the ScrollTrigger. barba.init({ transitions: [{ name: 'default-transition', leave(data) { return gsap.to(data.current.container, { duration: 0.5, y: 200, opacity: 0, }); }, after(data) { return gsap.from(data.next.container, { duration: 0.5, y: 200, opacity: 0, onComplete: function() { initScrollTriggers(); } }); } ... Please don't see this as an absolute solution - as mentioned this is quick and dirty and it is just to show how to kill and create again. Depending on quite some other things, it might be better to e.g. call the function somewhere else. But it seems to work. In the end to get it working properly is a matter of barba- and general-setup that you would have to tinker with to get it working 100% properly. Let me know if this helps. Cheers, Paul

@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(); });

Hi All… Trying to learn GSAP using Barba – I’m self-taught so constantly running into issues and thanks for this forum it has helped in many ways. I am hoping this question can be answered without a demo, because I am working in a dynamic environment and my issue is related to navigating from project to project, which technically is the same layout within the system, just loading in the content dynamically based on the project. To set this up, using JS & HTML, I have the latest versions of GSAP, ScrollTrigger, & Barba plugged up and the page transitions work from one page type to the next – took some time, but slowly figured it out. My issue now, are the project pages of the site within the portfolio section. The first time you navigate to a project, the page transitions and tl animations work as I created. The problem is when I navigate from one project page to the next project, on leave the page transitions out as expected, but then nothing is happening on enter. The page transition and tl animation don’t seem to reload. I have tried kill, reset, & clearProps – it could be the placement, but tried it many places with no luck. Based on the console logs everything is firing based on the sequence I setup, but I feel the whole page/timelines/ScrollTrigger needs to be reset/restart. Also, not sure where to place the reset – within Barba I am using both views and transitions. It is just the page is loading on to itself so how do I reset everything, so it starts all over and goes through all the animations when you go to the next project page. Any direction or link to other examples would be helpful.

I can not really give you any advice on that without seeing it in context, I'm afraid. There are just too many possible reasons why it doesn't work as you'd expect. It might be just another logic problem that you'd have to find a solution for within the context of barba (which would be my best guess here), like having to kill all your ScrollTriggers when leaving a page and re-initializing the page-specific ScrollTriggers when entering a new page. You'll find a link collection to different threads on that one in this thread here. It might just as well be something totally different, though. This thread here might also be helpful, as it links to another code example of GSAP together with Barba and to @ihatetomatoes' learning ressources. He also offers awesome courses on GSAP with Barba, the latest of them also with ScrollTrigger incorporated, if I am not mistaken. These forums actually try to stay focussed on GSAP specific questions, but if none of those ressources linked to does help you find a solution, I could take a peek at your code, if you'd update your codepen project (or even better create a minimal new one so the context of the previous questions remains intact) and I find the time.

@akapowl thank you very much - I would have never figured that out on my own. Plus I have not seen any other examples setup this way anywhere. I feel like I have seen these types of pages transitions using GSAP & Barba. This has solved my initial issue and your explanation makes sense. I am just not 100% sure I understand the pattern, but again not a JS expert at all. I got these changes added to a more complex framework and got the base page transitions working. Based on this page type is leaves & enters how i want - and set it for 2 different pages types! Now, I am running into other issues where I need to reset GSAP arrays... So within the individual page enter function, we are animating other elements after the page loads and when the user scrolls down the page - we have images staggering/animating in with a parallax effect. Any thoughts on how to reset these too? using your (el) to reset the elements within these functions. So these work on the initial page load, but not when you go to next container with the same namespace these arrays are not starting from scratch. example of one of the arrays - how would I reset something like this? sap.utils.toArray('.section-parallax .parallax-content').forEach((section, i) => { const heightDiff = section.offsetHeight - section.parentElement.offsetHeight; gsap.fromTo(section, { y: -heightDiff }, { scrollTrigger: { id: 'collectionParallax', trigger: section.parentElement, scrub: true }, y: 90, ease: "none" }); }); Is my issue a combination of GSAP & Barba ? Or strictly a Barba issue? Or is it how I am structuring my JS? I guess I was naïve to think that I could just reset everything back to the initial starting point when the next container loads. Let me know if you if you have any thoughts or other examples we can take a look at. Thank you for the help. Made it over a big hurdle! No on to the next one!

Very interesting, I realized that js barba periodically falls off when it is connected like this: https://unpkg.com/@barba/core But when I saved it and connected it locally as a file barba.umd.js, it stopped falling off

Then you're loading them dynamically. It's impossible to transition between pages on a hard navigation change because it reloads an entirely new page. Go through their documentation. It shows GSAP usage and even their site uses GSAP. https://barba.js.org/docs/getstarted/basic-transition/ For Flip, you would probably have to save the Flip state to a global variable outside of barba's init, like inside one of the beforeLeave/leave callbacks, and then do the Flip animation in one of the enter or after callbacks. https://barba.js.org/docs/getstarted/lifecycle/

Hello I am using this function to start ScrollSmoother (it's fantatsic BTW!) function scrollSmootherCreate(){ ScrollSmoother.create({ smooth: 1, effects: true, ignoreMobileResize: true, normalizeScroll: true }); }; Also added this cleanGSAP function: function cleanGSAP(){ ScrollTrigger.getAll().forEach(t => t.kill(false)); ScrollTrigger.refresh(); window.dispatchEvent(new Event("resize")); }; And use BarbaJS code below for page trantions all works fine on first load. But if i navigate to an other page and then back to home (index), the ScrollSmoother functionality does not work and any JS later fails. (if I remove scrollSmootherCreate(); from the code bewlo all works fine as expected) How can I 'reset' ScrollSmoother before entering back to home? barba.init({ transitions: [ { name: 'index', once() { siteFirstLoad(); scrollSmootherCreate(); contentAnimation(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async beforeEnter() { cleanGSAP(); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, async afterEnter() { scrollSmootherCreate(); contentAnimation(); }, to: { namespace: [ 'index' ] }, }, { name: 'default', once() { siteFirstLoad(); contentAnimation(); }, async leave(data) { gsap.to(data.current.container, { opacity: 0, }); }, async beforeEnter() { cleanGSAP(); }, async enter(data) { gsap.from(data.next.container, { opacity: 0, }); }, async afterEnter() { contentAnimation(); }, } ] })

Hey there! CodeSandbox is usually a better bet for project type setups https://codesandbox.io/dashboard/home?workspace=fec44104-55b3-427e-9b38-1fba4c888d7a There are also quite a few threads in these forums from people who have asked the same question about handling Barba page transitions. This thread lists out a lot of them and gives some advice. Good luck.

Sorry, I'm not familiar with barba.js but you can call ScrollTrigger.refresh() to force it to re-calculate the start/end positions of all the ScrollTriggers. If you're recreating things on the new page, make sure you .kill() the old ones that you don't need anymore. You can kill all the ScrollTriggers with: ScrollTrigger.getAll().forEach(t => t.kill()); If you still need some help, please make sure you provide a minimal demo with only the essential code necessary to illustrate the problem. Please don't include your whole project - just a few colored <div> elements would be fine. Glad to hear you're enjoying ScrollSmoother! Thanks for being a Club GreenSock member. 🙌