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

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

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

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>

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

HI Folks! I've been trying (very unsuccessfully) to build a portfolio site with GSAP and Barba.js I initially built everything with CSS animations as per www.frontenddevelopment.com.au/dev, but failed to get it working yesterday, so I rebuilt it stripped down in a couple of hours today with GSAP. Unfortunately, despite following Barba's documentation, I cant seem to get it working and after 9 hours today I'm pretty frazzled. It may be something silly that I've overlooked due to being so tired. Obviously CodePen is not the right vehicle for a multipage site and I'm not enamoured with it enough to buy a full membership, I spent it on a Club Greensock membership instead. I know that this is a bit off topic, but GSAP and Barba.js is a formidable combination, so I'm hoping that someone can help me get this wireframe working! AS you can see form the site on my dev server, I'm also embedding canvas elements as well. Thanks so much! Andy :) about.html contact.html index.html projects.html main.js transitions.js main.css

Hi All, I'm integrating ScrollSmoother in my new website and am using Barba.js to handle the page transitions. Everything seems to be working, just one little thing where I'm stuck. A Codepen is a little tricky because there's alot going on, but I'll try to explain. Since Barba doesn't use page refreshes the ScrollSmoother is not created each page but instead uses the instance of the first load. So I need to create a ScrollSmoother every new page transition, which is OK, but after every page enter I need to scroll to the top and this needs to be instant, otherwise it uses the scroll position of the previous page. What happens now is that the page transition fires, but then the window.scrollTo() is a smooth while it needs to be instant. I tried to .kill() the ScrollSmoother every page leave, but since the ScrollSmoother is created in a Barba hook each time I can't access the variable. Maybe I'm missing something or making it too complicated? Any help would be appreciated! Edit: you can see whats happening on https://dev.mathieudelporte.be/md/. Scroll to the footer and click on 'Over mij', you'll see the transition and the scroll to top happening this way.

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

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!

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

Hi guys I am new to Greensock and recently I have created a template website using both gsap and barba js. The full code can be found in https://github.com/kitsonchan/template_architecture and you can also view the website directly here https://kitsonchan.github.io/template_architecture/. So now the problem that I have been struggling with is the timeline that was using scrolltrigger. In both of my page Ihave a timeline called tlStage1 and tlStage2. The tlStage1 works completely fine at all conditions but I don't know why tlStage2 only works when you refresh the page. I am not sure if the issue is related to barba js lol so i decide to ask here. Thanks!