Search the Community

Hello, I decided to try add Barba JS into my project and got most things working as normal. On first load, everything is fine, but if I navigate from home to somewhere else, and back again, once I scroll to a pinned section, things get a little funky. The pinned section seems to pin okay, but on scroll it moves vertically and horizontally - I've left markers on for now. I can't create a simple CodePen as can't use Barba in it, but if you go here, https://ilimitado.studio/, then go to any other page and back to home again, when you scroll down and hit the horizontally pinned section, you'll see the weirdness first-hand. I've tried "anticipatePin: 1" and "invalidateOnRefresh: true" but no joy. In case it matters, I'm using GSAP 3.11.1 and am killing my ScrollTriggers (or so I think) using "ScrollTrigger.getAll().forEach(t => t.kill());" before reinitialising them - also tried "ScrollTrigger.killAll();" as seen it was added in the 3.11 release but still no luck. In Barbas once (on first page load) and beforeEnter (before the new view loads) I'm calling my custom JS in the exact same order/way - hence why I can't figure out what the difference is or why one jumps and one doesn't. P.S. I know you can't debug a project this size, but thought I'd post in case it's something daft I've done/missed. Thanks, Matthew

I've managed to fix this by moving the reinitialization of things to Barba's afterEnter hook.

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!

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.

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

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

Hi Giovanny, Is really hard for us to debug a live site plus I have zero experience with Barba. The errors/warnings are pretty clear in terms that they're telling you that those elements are not present in the DOM when those GSAP/ScrollTrigger instances are created. @Ihatetomatoes made a series of videos for using Barba with GSAP: On top of that you can use GSAP Context in your setup. While it was created thinking more in React and frameworks of that style I see no reason why it shouldn't be of any help in your case: https://greensock.com/docs/v3/GSAP/gsap.context() If Barba has some kind of callback when the transition of the previous page is completed, that is the page you're leaving, you can call the revert method in order to kill and revert all your GSAP/ScrollTrigger instances. The only requirement is that all your GSAP/ScrollTrigger instances must be created inside the context instance. Sorry I can't be of more assistance. 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

that's what i have import gsap from 'gsap'; 'part of animation js', import CustomEase from "gsap/CustomEase"; gsap.registerPlugin(CustomEase); const animOnes = (container) => { const rightLinks = container.querySelectorAll('.nav-anim') const scroll = container.querySelector('.scroll') const h1 = container.querySelector('.section-link h1') 'part of index.js' import '/src/css/style.scss' import smoothscroll from 'smoothscroll-polyfill'; import barba from '@barba/core'; import barbaPrefetch from '@barba/prefetch'; import gsap from 'gsap'; gsap.registerPlugin(CustomEase); import CustomEase from "gsap/CustomEase"; I started this project again still a lot of mess ,it shows me in console ap-core.js:164 GSAP target [object NodeList] not found. not found coz it physically doesn't exist is in some html files , so why is it looking for something non existent. In this case 'nav'. it only is in index.htlm 'about' , 'contact' html's don't have it . it's like a scrolling nav to sections. that's links to it if you like to see it https://6428a954b233897905779d10--blissful-easley-bd2cc4.netlify.app/index.html. One very important thing, I'm not pro. Thanks for answering

Hey Rodrigo, I've changed it to 'work-page' however once I do my transition to the work-page it doesn't work. It's not even being called once I transition in so I don't see WORK ANIMATIONS PLAYED!!! on my console. But, I see it being fired up once I refresh my page but the animations are broken. function initWorkAnimations() { if (document.body.id === 'work-page') { console.log("WORK ANIMATIONS PLAYED!!!"); const container = document.querySelector('.scrollx'); const sections = gsap.utils.toArray('.scrollx section'); // const texts = gsap.utils.toArray('anim'); const mask = document.querySelector('.mask'); . . . } Mind you that I'm firing up all my scripts in this function: // Main Scripts function initScripts() { initNavAnimations(); initMagneticButtons(); initButtonsAnimations(); initHomeAnimations(); initWorkAnimations(); } And is being used in the barba hooks barba.init({ sync: true, timeout: 7000, debug: true, // !IMPORTANT views: [{ namespace: 'work-page', beforeEnter() { // THIS VIEW MIGHT BE USELESS console.log('WORRRRRRK PAFGE ENTER'); }, }], transitions: [{ name: 'default', async once(data) { // Once page loads initSmoothScroll(data.next.container); initScripts(); // FIRE ALL SCRIPTS ONCE PAGE LOADS }, 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(); // FIRE ALL BEFORE ENTERING THE NEW TRANSITIONED PAGE 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(); }, }] })

Hi, Thank you for responding I'm trying to upload everything to codesanbox but is acting weird. It doesen't read my images and gsap is not being defined. Please see: https://codesandbox.io/s/compassionate-wescoff-92sm2w?file=/app.js Also, I've already tried using gsap.context() since it was suggested to revert the animations once I transition and I call the ctx.revert() in my barba transitions but nothing worked. I put all my animations inside the context such as my home animations. Maybe I'm calling the functions wrong? So something like this: // NOTE: data.next = current container barba.init({ sync: true, timeout: 7000, debug: true, // !IMPORTANT views: [{ 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()); ctx.revert(); // ----> REVERT or 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(); }, }] }) let ctx; function initHomeAnimations() { if (document.body.id === 'first-page') { ctx = gsap.context(() => { //Page 2 const tlH = gsap.timeline({ scrollTrigger: { trigger: '.background', // markers: { startColor: 'blue', endColor: 'blue' }, scrub: true, start: '-40%', end: '40%', }, }); tlH.fromTo(...) .... }

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!

Hello, Ignore the errors. The errors are due to not providing the rest of the HTML code which has nothing to do with the issue I've encountered. With or without the HTML the nav bar is flickering or more specifically I think the rounded-div is the issue since that is the last left-most element in the fixed-nav. Before I did any Barba transitions the flickering will still be there so It's not related to Barba or missing HTML elements errors. Please take a look at the same code pen, I've provided the first full-page html doc without the second page which codepen isn't allowing me but it shouldn't matter for this issue. NOTE: I have the full code and I have already fixed any necessary errors before posting this issue.

Hello Guys, it's my first Forum Article. I'm using GSAP for nearly a year now. I'm using GSAP + GsapSmoothScroll + ScrollTrigger and Barba.js I have some slightly complex Animations on my Site and its extremely laggy on iPhone Safari I tried a lot of Solutions that I found hear, but nothing really works. Does someone have some Ideas how to fix. Here is a Link to the Website: This is my config for the ScrollSmoother. The Lag is specially on the page uid42 thats the link i put in hear. The other pages are ok not perfekt but ok: I hope its enough information. scroll = ScrollSmoother.create({ smooth: 0.2, // how long (in seconds) it takes to "catch up" to the native scroll position effects: true, // looks for data-speed and data-lag attributes on elements ignoreMobileResize: isMobile() && !document.querySelector("#uid1") ? true : false, normalizeScroll: isMobile() && !document.querySelector("body:not(#uid42)") ? true : false, }) On a Mission (hantha.net) Hope someone could help me.

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen, Stackblitz or CodeSandbox that demonstrates the issue? I strongly suspect the issue is related to LocomotiveScroll or Barba, neither of which we can support because they're not GreenSock products. But just make sure that you're firing things in the right order, like loading everything in so the elements exist in the DOM, then setting up your LocomotiveScroll stuff, and finally your ScrollTrigger stuff. If you are mounting/unmounting stuff, make sure you do proper cleanup so that you don't have animations/ScrollTriggers hanging around that are controlling elements that exited the DOM. gsap.context() makes that super easy. Please don't send us your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: https://codepen.io/GreenSock/pen/aYYOdN If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.

Hi there - this thread has a lot of advice on Barba, take a look and pop back if it's not helpful.

I'm trying to fix many errors that I get in the console by gsap on the workpage.html. My logic is to have if statements that will fire up the gsap animations respectively if they're on the correct page For example: function initHomeAnimations() { if (document.body.id === 'first-page') { //Page 2 const tlH = gsap.timeline({ scrollTrigger: { trigger: '.background', // markers: { startColor: 'blue', endColor: 'blue' }, scrub: true, start: '-40%', end: '40%', }, }); tlH.fromTo('.highlight', { color: 'rgba(255, 255, 255, 0.4)' }, { color: 'rgba(255, 255, 255, 1)', stagger: 1 }); ..... } at first it works once I enter the first page but once I hit the workpage.html it continues to run which I don't want because it gives me a bunch of errors like gsap couldn't find the element which for some reason is running still. Also, I have the following condition: But it doesn't work. I want this to only fire up when it is on the work page. However, if I change the condition to first-page or don't include the condition at all it works as expected which is weird. Another issue is if I refresh on the workpage.html everything breaks. function initWorkAnimations() { if (document.body.id === 'work-page') { const container = document.querySelector('.scrollx'); const sections = gsap.utils.toArray('.scrollx section'); const texts = gsap.utils.toArray('anim'); const mask = document.querySelector('.mask'); // Preference const nav = document.querySelector('.nav'); nav.classList.add('absolute-nav'); // Animations ..... } } For some reason I'm trying to screenshots to this forum but it doesn't allow me since it exceeds kb. So here is the code sandbox repo, try running it on visual studio using live server or fork it One solution I'm going to give a try is to use Barba views and fire up the respective function to their corresponding namespace. Link: https://codesandbox.io/p/github/officialgio/officialgio.github.io/draft/boring-khayyam?workspaceId=ee1f26f5-6074-4dc6-8c22-f5fbab809816&file=%2Fapp.js&selection=[{"endColumn"%3A1%2C"endLineNumber"%3A254%2C"startColumn"%3A1%2C"startLineNumber"%3A254}] Repo: https://github.com/officialgio/officialgio.github.io

Hi, There are a lot of errors and warnings on your codepen: In line 11 word is undefined: word.classList.add('loading--active'); Also it seems that you also have barba for transitions there as well. I'd suggest you to fix those errors first and then see what could be the issue. Maybe is related to one of those warnings as well. Happy Tweening!

Your video doesn't seem to match the CodePen you provided. Is it the email button that you're talking about? Have you tried removing 3rd party tools like LocomotiveScroll and barba from the equation? And also update to the latest GSAP version (you're using 3.8.0 but we're at 3.11.5 right now). Sounds like maybe a browser rendering bug (unrelated to GSAP). Safari on iOS is the most buggy browser I've ever seen by far.

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>

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.

Hi, @Ihatetomatoes made this great series of videos about using Barba with GSAP, might be worth taking a look at them: Hopefully this helps. Happy Tweening!

I think what you’re looking for is https://barba.js.org

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