Search the Community

https://repl.it/join/wxtqbzvv-eest Hi there. I've run into some trouble implementing Barba JS. The prototype I am working on incorporates BarbaJS for page transitions and Isotope for gallery filtering (which isn't relevant for this query). In the prototype, if you click on 'project' the page transitions from 'home' to 'project' with a swipe. The functionality I would like to implement is that when you close that green project page it swipes the green away to reveal the home page (basically the reverse of the entry tranistion). At the moment, the function to animate that swipe is initiated but the transition doesn't actually occur - the green page just closes. The approach I have taken is to use BarbaJS Rules to designate particular functions on certain events. Any help or comments are greatly appreciated. Of course if a response to another post addresses my query please feel free to point me there. Thanks again.

Thank you. I received an answer on Barba github, there is an option to prevent clicks during the transition preventRunning. Somehow it solves my problem! I wouldn't know how to make a Codepen demo, it's a fiddly setup in Wordpress.

If the GSAP timeline is not finished, when I load the next/previous post with Barba, it breaks. This is the problematic transition. Can anyone spot what's wrong here? Thank you { name:"next", leave({ current, next, trigger }) { return new Promise(resolve => { const timeline = gsap.timeline({ onComplete() { current.container.remove() resolve() } }) const image = current.container.querySelectorAll(".photo") timeline .to(image, { opacity: 0 }, 0) }) }, beforeEnter({ current, next, trigger }) { return new Promise(resolve => { const timeline = gsap.timeline({ onComplete() { resolve() } }) const image = next.container.querySelector(".photo img") timeline .to(image, {opacity: 1}, 0) }) }, enter({ current, next, trigger }) { return new Promise(resolve => { const timeline = gsap.timeline({ onComplete() { resolve() } }) const charge = next.container.querySelector("#charge") const years = next.container.querySelector(".years") timeline .set(charge, {opacity: 0, x: "-100%"}) .set(years, {scale: 0}) .to(charge, {opacity: 1, x: 0}, 0) .to(years, {scale: 1}, 1) }) } }

Hi @ZachSaucier , nope I'm not using the markers but the markers are indicating from what i gather anyway where the animation starts so getting them in the right position is key and then turn them off . So I was just using them as a guide really , oh hahahah I found a workaround so but I'll try that either if I run into this very problem again hahaha . No I completely understand the honus is not on you as that is not your problem really , if i ever run into Barba problem again , do you have any forums I could use ? Thanks a million for your help over last few days , think I'll just about be able to launch it in large part thanks to you . Youre a sound man , see ya again i imagine lol 👌😂 Cheers Adam

Decided I should leave this here and contribute for once lol 😃. Update : For anyone who might be coming to this in the future , I observed that when I resized the window the markers updated their position idk why but this is absolutely unreal because what I did was basically simulate a window resize to get the markers back to their desired locations So for anyone who comes to this and observes your scroll markers are in a different position after a Barba page transition , this is what I did I have my afterEnter hook calling a function called aboutInit to handle all page onboarding issues I'm facing, in the function what it does first is what I mentioned above checks all the classes in the DOM for gsap one's against a regex and then finds these gsap markers and removes them so now you're only left with no markers . Then I call my actual function to do the horizontal scroll effect and give me a brand new set of markers and now you're left with that set of markers in the wrong positions (as stated above - read that before continuing ). So then just simulate a window resize event to kick the markers back into their original positions then everything is in order and your animation should start and end in the right place . What I did was check the top position on just reload of the page in the right original position , then do a barba transition let all this happen above and bam left with the same top positions for the markers. Hope that makes sense . 🤙 Here is the code - aboutInit // About Page Functions const aboutInit = () => { let horizontalscrollAnim, cleanGSAP() if(typeof horizontalscrollAnim === "undefined") { scroll_facts_tl_func(); } window.dispatchEvent(new Event('resize')); } const cleanGSAP = () => { const allClasses = [...document.querySelectorAll('[class]')] let gsapArray = [] if(allClasses.length <= 134) return for (var i = 0; i < allClasses.length; i++) { if (/gsap-/.test(allClasses[i].className)) { gsapArray.push(allClasses[i].className); } else break } gsapArray.map(tag => document.querySelector(`.${tag}`).remove()) } //You don't need this but it's just so you know what I'm calling const scroll_facts_tl_func = () => { const facts = [...document.querySelectorAll('.fact')], factsContainer = document.querySelector('.factsContainer'); let xPercent window.matchMedia("(max-width: 600px)").matches ? xPercent = -85 : xPercent = -115 horizontalscrollAnim = gsap.to(facts, { xPercent: xPercent * (facts.length - 1), ease: "none", scrollTrigger: { trigger: ".factsContainer", pin: true, pinSpacing: true, // markers: true, scrub: 1, snap: 1 / (facts.length - 1), start: "top top", // base vertical scrolling on how wide the container is so it feels more natural. end: `+=${factsContainer.offsetWidth}` //4320 } }); } Helper Methods // Helper Functions const delay = (ms) => { return new Promise(resolve => setTimeout(resolve, ms)); } Barba Initialization barba.init({ sync: true, transitions: [{ name: 'transition-base', async leave() { const done = this.async(); pageTransition(); await delay(1000); done(); }, async enter() { window.scrollTo(0, 0); }, }], views: [ { namespace: 'about', afterEnter() { aboutInit() } } ], }); Here's also a Test Site I put to show what I mean just do exactly as stated to see the effect and discreptancy in the markers positions due to Barba transition 1. Go to https://testbarba.netlify.app/ 2. Click the about page - this will trigger barba transition - take note of the markers positions(end and start in the inspect element) 3. Then just reload the about page and you will notice the different positions of your markers upon load (again in the inspect element) 4. You can use above to fix this , if this is your problem Cheers Adam

Right @ZachSaucier , I know you're sick of seeing my name pop up talking about GSAP and Barba Combination. The problem is BarbaJs doesn't really have a forum (well from what I could find anyway), but what I will confess to and start trying to do is debug my problems more before coming to this forum that's why yesterday I basically spent the day trying to debug my actual first problem I still can't get. I turned off all functions bar one and stepped through all variable values at all stages of DOM loading and manipulation through the Barba hooks , I identified the places I needed to add a setTimeout and also I found out which hooks come first(enter , DOM load , etc... ) and that the afterEnter hook is probably the best place to initialize anything you want because if you place a function call in there it gets called whether or not you're transitioning through Barba. As I said before I really did try to debug this time as much as possible and identified my problem I think . As I said in a earlier post , markers are added every time by GSAP on page load (which I'm guessing is how ye make the pinning possible starting at the start marker pin until the end marker and then the other two are to do with the scroll position on the page. So what I observed in the inspect element is that when you transition to a page with Barba the amount of markers doubles and so pushes down the start marker and end marker down the page causing my animation to start at a different place which is what I'm observing is happening in my site now if i go to homepage and click about , to counteract this what I have done is got rid of all the markers on page load so that GSAP can add it's new markers and not be pushed down , however I don't know how but the markers added are still getting pushed down even though they're only ones there now , what's happening is lets take this problem for example, On Normal page Load my Start Marker top - 2371px Height Of my Container that pins - 4320px End Marker top - 6691px - This works without a hitch perfectly After Barba Transition Page Load Start Marker top - 7175px Height Of my Container that pins - 4320px End Marker top - 11495px - This works at the wrong position therefore doesn't perform properly (overlapping other elements and what not) So to be clear If i didn't remove some of the markers page would look like this like it does now 2371 +4320 6691 7175 +4320 11495 Now when I clear it takes care of the first one's so you're left with this now 7175 +4320 11495 Now What I want is to move these positions to the same as page load normal that being 2371 +4320 6691 But when I tried to do this the actual top value changed / updated as the tag jumped up but seems GSAP somewhere has it defined that the animation is still getting set at the marker at 7175 so when I scroll to that position this is when it actually works but at the wrong position as already stated , further down the page . Wondering how are those markers position set and/or the way you use to identify where to start animation and how would I go about changing these positions to my desired ones on page load after barba transition. So now to your post above Zach , I intentially left out Barba Script and Barba wrapper data properties on the homepage as you said you wanted a simple but effective test case so you could see what I was on about that animation with Barba and without is different so I set Homepage as page without the Barba and the about page as page with it, as for not including all the resources you needed to carry out the experiment yourself stupidly I thought you were going to just look at my code , at the live version and work it out from there , I didn't think you were going to reverse engineer it so sorry for that in the future I will most definitely be more thorough with providing all resources if i'm asking a question on this forum. I'm sorry , this is all pretty new to me writing in forums as I haven't wrote questions before on forums as I'm normally a hard worker 100% never give up until you got it don't show someone else they are better than you guy and you'll get this . But taking a step backward from this over this year I have identified that asking for help is not a form of weakness but strength as you it's through help you get better and learn more things , otherwise you stuck in a rut for a long time leading to unfinished projects. So I have taken the leap to ask for more help I do agree however I should have debugged this issue above a bit better but I'm trying that's all I can do 🤷‍♂️. Okay what I will say and acknowledge is a huge thank you to you and the team at GSAP who work tirelessly to help us create spectacular animations and ScrollTrigger is another amazing addition to this outstanding library. Personally thank you for sorting the stupid bug I missed yesterday 🤙 Cheers Adam

Well I tried to add a timeout but it didn't change anything... even with a giant timeout, nothing happens... As you can see markers are appearing on top of page even if i put like 10 sec timeout : Sorry to bother you with my barba.js problems....

I just answered another question about Barba.js: The main issue there was that the content had not been fully loaded before recreating the ScrollTrigger. Adding a simple setTimeout for the function that created the ScrollTrigger fixed the issue. Please try doing the same thing in your project

Hey Adam. This is 100% a Barba.js question, not at all related to GSAP. So don't expect to get this level of help next time if you're asking about Barba.js issues But this time I'm happy to help. The code that you provided is close to a minimal and complete demo. But there are a few things that I had to do to get it working: Load Barba.js. Find the styles file that is on your live version (you didn't provide it in the post above). You don't have the data attributes that Barba uses in the index.html page. So I had to add those. In general you should include your script tags in the bottom of your document right before the closing </body> tag. Once I got all of that working, it throws an error saying delay is not defined. So I had to define a delay function that returns a promise that resolves after the given number of milliseconds. Additionally the live version that you have errors out as well (check the console to see). When creating demos, please make sure that we will have everything that we need to recreate the issue with as little effort as possible (you're much more likely to get more and faster responses that way ). Now, onto the actual issue here: The main issue is that enter() runs before the page is fully loaded. To fix it, I recommend using a setTimeout (or requestAnimationFrame) to delay the scrollAnimation function call a little bit. Here's what works for me: Index: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body data-barba="wrapper"> <div data-barba="container" data-barba-namespace="index"> <div class="container"> <div class="page one">One</div> <div class="page two">Two</div> <div class="page three">Three</div> </div> <div class="about_btn_container"> <a href="about.html">About</a> </div> </div> <footer> All Rights Reserved &copy; Adamoc 2020 </footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@barba/core@2.9.7/dist/barba.umd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/ScrollTrigger.min.js"></script> <script defer src="main.js"></script> </body> </html> About: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body data-barba="wrapper"> <div data-barba="container" data-barba-namespace="index"> <div class="container"> <div class="page one">One</div> <div class="page two">Two</div> <div class="page three">Three</div> </div> <div class="about_btn_container"> <a href="index.html">Index</a> </div> </div> <footer> All Rights Reserved &copy; Adamoc 2020 </footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/ScrollTrigger.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@barba/core@2.9.7/dist/barba.umd.min.js"></script> <script defer src="main.js"></script> </body> </html> Main.js: let myAnim; const scrollAnimation = () => { const pages = [...document.querySelectorAll('.page')]; const container = document.querySelector(".container"); myAnim = gsap.to(pages, { xPercent: -100 * (pages.length - 1), ease: "none", scrollTrigger: { trigger: container, pin: true, scrub: 1, snap: 1 / (pages.length - 1), // base vertical scrolling on how wide the container is so it feels more natural. end: () => "+=" + container.offsetWidth } }); } function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } if(typeof myAnim === "undefined") { scrollAnimation(); } barba.init({ sync: true, transitions: [{ name: 'transition-base', async leave() { const done = this.async(); await delay(1000); done(); }, async enter() { document.documentElement.scrollTop = 0; setTimeout(scrollAnimation, 10); }, }], });

You can see the issue on http://devmr.benoitbarberot.fr/dematerialisation/ if you navigate between the pages "dématérialisation", "chargé de production" and "chargé de casting", you'll see that when the page is loaded normally, scrolltrigger works as a charm, then if you go to another page, it will not work until you resize your window. I think so, as I said I use barba.js to manage ajax transition, and with barba you can use differents hooks to call some Javascript. I use the hookafter which, as they say, launch after everything : https://barba.js.org/docs/advanced/hooks/ ( you can see it on the table on top of the website) I don't know if there is any JS way to make it happen later..

Hi there, okay so thank you @ZachSaucier for your advice on what to do next with my situation. So I've made a little test , minimal and I think complete which shows the difference in the reaction of scrollTrigger with and without BarbaJS enabled on the page. So I have a homepage which has horizontal scroll perfectly available and working then I include a button to click the about page , click the button and brought to the about page (same animation but doesn't give you the same result) only able to scroll halfway across and not able to reach the footer. Wondering why this is the case and what can I do to combat the differences in the adjustment of the dimensions of the page made by Barba. Here's the site - https://testbarba.netlify.app/ Here's the code - index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/ScrollTrigger.min.js"></script> <script defer src="main.js"></script> <title>Document</title> </head> <body> <div class="container"> <div class="page one">One</div> <div class="page two">Two</div> <div class="page three">Three</div> </div> <div class="about_btn_container"> <a href="about.html">About</a> </div> <footer> All Rights Reserved &copy; Adamoc 2020 </footer> </body> </html> about.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/ScrollTrigger.min.js"></script> <script defer src="https://unpkg.com/@barba/core"></script> <script defer src="main.js"></script> <title>Document</title> </head> <body data-barba="wrapper"> <div class="container" data-barba="container" data-barba-namespace="about"> <div class="page one">One</div> <div class="page two">Two</div> <div class="page three">Three</div> </div> <div class="about_btn_container"> <a href="about.html">About</a> </div> <footer> All Rights Reserved &copy; Adamoc 2020 </footer> </body> </html> main.js const scrollAnimation = () => { let pages = [...document.querySelectorAll('.page')] gsap.to(pages, { xPercent: -100 * (pages.length - 1), ease: "none", scrollTrigger: { trigger: ".container", pin: true, markers: true, scrub: 1, snap: 1 / (pages.length - 1), // base vertical scrolling on how wide the container is so it feels more natural. end: () => "+=" + document.querySelector(".container").offsetWidth } }); } scrollAnimation() barba.init({ sync: true, transitions: [{ name: 'transition-base', async leave() { const done = this.async(); await delay(1000); done(); }, async enter() { window.scrollTo(0, 0); }, }], views: [ { namespace: 'about', beforeEnter(data) { }, afterEnter() { scrollAnimation(); }, } ], }); Cheers Adam

Hello, first I wan't to give a big thanks to gsap creators. gsap is insane and scrolltrigger is THE thing that was missing to make gsap perfect. But i have troubles with Scrolltrigger, scrolltrigger works perfectly when I load a page, but my website uses ajax transitions between pages, and I can't figure out how to make my animations works again when I navigate to another page. I don't have errors in console, but triggers just don't do anything. I tried to use the refresh() method, or kill() on my scrolltrigger instance and then reload the js, but they don't seems to do the job. My ScrollTrigger declaration looks like this : initMainAnimations() { const selector = ".feature h3, " + ".feature .img-container, " + ".feature p, " + ".feature a, " + "#see-also .other"; const targets = gsap.utils.toArray(selector); targets.forEach((target) => { ScrollTrigger.create({ trigger : target, onEnter : () => target.classList.add('active'), onEnterBack : () => target.classList.add('active'), start : "top 95%", id : 'main_scroll_trigger' }) }); } (I use barba.js for pages transitions) To be honest i'm lost and i don't really know even theoretically what to do to solve this problem. Maybe gsap can't find ajax loaded elements because of the DOM being modified ? Maybe there is a way to drop everything related to gsap and reload my js ? Maybe it's a noob's question and i'm really sorry if it's easy but i really have no idea of what to do... (sorry for bad english) Sorry i have no codepen to reproduce the case but I don't find a way to give you a small exemple of that, I can put the website online in case it helps. Let me know if you want to see more code. /* EDIT */ gsap actually find targets (it works if i log targets ) But if I set markers to true , I see that they are all on top of the page. even if I use the barba hook afterwhich fires my js after transition is fully done, gsap seems to create triggers before everything is loaded

Probably has to do with you dynamically changing the location. You might need to use cache busting url. https://stackoverflow.com/a/14197329/2760155 Or force it to reload. https://stackoverflow.com/a/14197317/2760155 But I would probably start with calling the animation on load, or maybe using barba to do the route changes. https://barba.js.org/

Okay , thank you sm @mdelp, I followed all the steps you suggested and the website is running a lot smoother now. Followed all those cutting down on code steps and cut down my JS code into one file called main.js as suggested by you and @Yannis Yannakopoulos. This works a lot better than multiple JS files , so thank you . I've fixed my actual problem it was Barba acting up so just had to reclare variables on a beforeEnter hook to the next container . Now I'm just having a minor issue with pinning and using horizontal scrollTrigger . My aim is to scroll until the .factsContainer , create a timeline like i've done before , then have the heading fade in and then scroll little more and pin the .factsContainer_sm container containing the facts , then create a smooth snapping horizontal scroll for the offsetWidth of that container , then unpin and continue . I have created a codepen of what I want and copied the code directly into my actual website as is and it's not working as desired , just wondering could anyone help me please. main.js 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" }) gsap.to(facts, { xPercent: -85 * (facts.length - 1), scrollTrigger: { trigger: ".factsContainer_sm", start: "center center", end: `+=${factsContainer_sm.offsetWidth}`, // 414 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}` } }); } Codepen - https://codepen.io/Adamoc/pen/RwrgyRv Website - https://adamoceallaigh.netlify.app/about.html but to get extent of what i'm working with you have to go https://adamoceallaigh.netlify.app/index.html and click 'About' Cheers Adam

@adamoc when working with Barba there are a few things you have to get right in order to have everything working. Maybe it's best to double check everything below: All the main elements that do not have to be reloaded each transition have to be inside the Barba wrapper, but not inside the Barba container. This means all your stylesheets, JS files, things that do not change like the header, footer, ... Everything else goes inside the Barba container, i.e. the content that gets replaced everytime. In my case I have one stylesheet and one JS file, which are just compiled assets from multiple files. If I were you, I'd load all the JS file at the bottom of the file, just before the closing body tag. All functions that have to run everytime need to be reinitialised in a Barba hook, which is probably almost all of them. How I work is I write all animations and other functionality in seperate functions. Since I use WordPress the first thing I do when the site loads is init all those functions in a document ready, so in the Barba case, this means all functions have been initialised for all pages. Then I make sure that functions that need to be reinitialised every transition are included in the 'barba.hooks.afterEnter'. My barbaInit() function gets called on document.ready, together with all my other functions. Those anim_about_in() are functions containing GSAP animations for the page in animations, so they only fire when entering a specific namespace. You can init all your animations on the first Barba load to make sure if someone goes directly to the about page they see the animations, or do a conditional check with something like a .first-load class on the body to make sure all animations work both with and without a Barba transition. For the stylesheet, you need to load all stylesheets because they are outside the Barba container and will not be replaced. Same goes for all other assets. Since all assets are loaded on the first load and don't have to be reloaded every page transition you have to include them all (not just on the homepage in case someone goes directly to another page). What I do is concatenate all sass into one css file and js into one file, and then have a preloader on the first load for when the assets are loading. Hope this helps!

@adamoc that's a lot of code to digest easily. Maybe if you could provide a reduced case, i could understand better. However, taking a quick look at your code i think your main issue is more in the architecture of the code, than it is about ScrollTrigger. I noticed you are initialising Barba.js inside your homepage.js file. Not sure what your structure is, but provided that homepage.js is only used on homepage, that approach is wrong. You should have something like a main.js file, which will contain all your Barba.js related functions and then use Views for any page specific logic. Take a look at the docs, they have some great details.

Hi there , I'm definitely having the same issue and thank god I found this forum because I was thinking i was going insane trying to find the bug. So basically as I'm guessing this is why my ScrollTrigger is not working as expected with BarbaJS as I navigate from the homepage to about page on my portfolio site everything else works as expected but sometimes the markers are out of their places . Which is even more weird is that sometimes the behaviour is actually perfect when viewed on mobile and then other times not on mobile but i'm guessing it has something to do with the Barba Removing of my elements so basically what you advise me to do is make reference variables to the elements I want to animate with GSAP and then call a function in beforeAfter () hook to redeclare those variables to new elements that Barba has swapped in and then pass them to the gsap animations. Or what do ye( @GreenSock @Yannis Yannakopoulos, @2malH) mean kill the scrollTrigger instance , why do I need to do that , is that just an easier way of doing what I've just implied above?? homepage.js //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); // }) 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, duration: 1, delay : .2 }), 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 my homepage - https://adamoceallaigh.netlify.app/ and here's my about page - https://adamoceallaigh.netlify.app/about.html

I'm having a problem and i'm unsure as to whether 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 ?? 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

Hi @Nekiy2, Thank's for reply ! I can not in my case include ScrollTrigger. For simple, my code : const slides = document.querySelectorAll(".step"); const container = document.querySelector(".scroll-container"); let oldSlide = 0; let activeSlide = 0; let dur = 0.1; let dur2 = 1; let offsets = []; let ih = window.innerHeight; document.querySelector("#upArrow").addEventListener("click", slideAnim); document.querySelector("#downArrow").addEventListener("click", slideAnim); // figure out which of the 4 nav controls called the function function slideAnim(e) { oldSlide = activeSlide; // dragging the panels if (this.id === "dragger") { activeSlide = offsets.indexOf(this.endY); } else { if (gsap.isTweening(container)) { return; } // up/down arrow clicks if (this.id === "upArrow" || this.id === "downArrow") { activeSlide = this.id === "upArrow" ? (activeSlide += 1) : (activeSlide -= 1); // click on a dot } else if (this.className === "dot") { activeSlide = this.index; // scrollwheel } else { activeSlide = e.deltaY > 0 ? (activeSlide += 1) : (activeSlide -= 1); } } // make sure we're not past the end or beginning slide activeSlide = activeSlide < 0 ? 0 : activeSlide; activeSlide = activeSlide > slides.length - 1 ? slides.length - 1 : activeSlide; if (oldSlide === activeSlide) { return; } // if we're dragging we don't animate the container if (this.id != "dragger") { if (activeSlide < 3) { gsap.to(container, dur, { y: offsets[activeSlide], ease:"power2.inOut" }); } else { // In this moment and next = piling gsap.utils.toArray(".piling").forEach((panel, i) => { ScrollTrigger.create({ trigger: panel, start: "top top", pin: true, pinSpacing: false }); }); ScrollTrigger.create({ snap: 1 / 4 }); } } pageTransition(); } window.addEventListener("wheel", slideAnim); window.addEventListener("resize", newSize); newSize(); // resize all panels and refigure draggable snap array function newSize() { offsets = []; ih = window.innerHeight; console.log(ih); gsap.set(".scroll-container", { height: slides.length * ih }); gsap.set(slides, { height: ih }); for (let i = 0; i < slides.length; i++) { offsets.push(-slides[i].offsetTop); } } HTML : (Sorry is big) <main class="scroll-container" data-barba="container" data-barba-namespace="home-section"> <div id="step1" class="step"> <div class="container"> <div class="row placement-row align-items-end position-relative vh-100"> <div class="col-lg-4 col placement-bg"> <div class="bg-marron p-4 px-5 position-relative animate-this"> <div class="mb-5"> <span class="sub-title color-white text-uppercase">Le bonheur,<br> ça se construit</span> <p class="text-uppercase font-weight-light color-white mt-3">PIRAINO, Constructeur de maisons dans le Nord et le Pas-de-Calais</p> <p class="color-white">Concevoir la demeure de vos rêves, telle est la mission que se donne PIRAINO, constructeur de maisons dans le Nord et le Pas-de-Calais (à Lille, Roubaix, Dunkerque, Valenciennes, Arras, Lens, Cambrai…). Experts dans notre domaine, nous sécurisons au mieux votre projet pour lui offrir toutes les chances d’aboutir !</p> </div> <div class="placement-btn"> <a href="" class="text-uppercase btn btn-kaki">Vivez l’expérience MAISON Piraino</a><a href="" class="btn btn-arrow"><i class="fas fa-chevron-right"></i></a> </div> </div> <div class="grp-btn row justify-content-between mt-3"> <div class="col-6 z-index2"> <a href="" class="btn btn-black w-100 animate-this">CONTACT</a> </div> <div class="col-6 z-index2"> <a href="" class="btn btn-white w-100 animate-this">PRENDRE RENDEZ-VOUS</a> </div> </div> </div> <div class="col-lg-7 text-center position-second-step position-absolute"> <h1 class="title-principal text-uppercase color-white font-weight-light text-title-center mt-lg-0 mt-3"> vous aussi<br> vivez l’experience<br> piraino</h1> </div> <div class="block-nav"> <i id="upArrow" class="far fa-angle-up go-prev"></i> <i id="downArrow" class="far fa-angle-down go-next"></i> </div> </div> </div> <img src="public/images/maison-slide-1.png" class="first-image w-100 position-absolute placement-image"> <div class="position-first-plan w-100 text-center position-absolute d-flex justify-content-center"> <img src="public/images/couple-slide-1.png" class="mouse-move-x z-index2"> </div> </div> <div id="step2" class="step"> <img src="public/images/arbre-slide-2.png" class="position-absolute arbre"> <div class="container"> <div class="row placement-row align-items-end position-relative vh-100"> <div class="col-lg-4 placement-bg"> <div class="bg-kaki p-4 px-5 position-relative animate-this"> <div class="mb-5"> <span class="sub-title color-white text-uppercase animate-this">uN rêve<br> accessible</span> <p class="text-uppercase font-weight-light color-white mt-3">Vos souhaits, une priorité ..</p> <p class="color-white">Afin de satisfaire l’ensemble de vos attentes, notre bureau d’études, composé de concepteurs hautement qualifiés, tient compte des besoins que vous leur exprimerez. Leur objectif ? Faire de votre projet de construction, dans le Nord-Pas-de-Calais, une réalité !</p> </div> <div class="placement-btn"> <a href="" class="text-uppercase btn btn-kaki">NOS MAISOns CUBIQUES</a><a href="" class="btn btn-arrow"><i class="fas fa-chevron-right"></i></a> </div> </div> <div class="grp-btn row justify-content-between mt-3"> <div class="col-6 z-index2"> <a href="" class="btn btn-black w-100 animate-this">CONTACT</a> </div> <div class="col-6 z-index2"> <a href="" class="btn btn-white w-100 animate-this">PRENDRE RENDEZ-VOUS</a> </div> </div> </div> <div class="col-lg-7 text-center position-absolute position-second-step"> <h2 class="title-principal text-uppercase color-white font-weight-light text-title-center mt-lg-0 mt-3"> UNe MAison unique,<br>La votre !</h2> </div> <div class="block-nav"> <i class="far fa-angle-up go-prev"></i> <i class="far fa-angle-down go-next"></i> </div> </div> </div> <img src="public/images/maison-slide-2.png" class="first-image position-absolute placement-image"> <div class="position-first-plan w-100 text-center position-absolute d-flex justify-content-center"> <img src="public/images/hamac-slide-2.png" class="mouse-move-x z-index2"> </div> </div> <div id="step3" class="step"> <div class="container"> <div class="row placement-row align-items-end position-relative vh-100"> <div class="col-lg-4 placement-bg"> <div class="bg-blue p-4 px-5 position-relative animate-this"> <div class="mb-5"> <span class="sub-title color-white text-uppercase animate-this">un style<br> unique</span> <p class="text-uppercase font-weight-light color-white mt-3">Anne-Sophie et Florian Henin Beaumont</p> <p class="color-white">”Nous avons réceptionné notre maison en Août 2018 après 8 mois de construction. Un grand projet pour un premier achat qui s'est déroulé à merveille. Nous avons eu un chef de chantier Mr L. Francesco à l’écoute de nos attentes et de nos besoins, très disponible et vraiment professionnel. A aujourd'hui nous conseillons PIRAINO à notre entourage car nous n'avons pas été déçus. Si un jour nous devrions refaire bâtir nous passerons par PIRAINO. Nous sommes très content de notre construction”</p> </div> <div class="placement-btn"> <a href="" class="text-uppercase btn btn-kaki">NOS MAISONS CONTEMPRAINES</a><a href="" class="btn btn-arrow"><i class="fas fa-chevron-right"></i></a> </div> </div> <div class="grp-btn row justify-content-between mt-3"> <div class="col-6 z-index2"> <a href="" class="btn btn-black w-100 animate-this">CONTACT</a> </div> <div class="col-6 z-index2"> <a href="" class="btn btn-white w-100 animate-this">PRENDRE RENDEZ-VOUS</a> </div> </div> </div> <div class="col-lg-7 text-center position-second-step position-absolute"> <h2 class="title-principal text-uppercase color-white font-weight-light text-title-center mt-lg-0 mt-3"> Les maisons PIRAINO,<br> un style inimitable</h2> </div> <div class="block-nav"> <i class="far fa-angle-up go-prev"></i> <i class="far fa-angle-down go-next"></i> </div> </div> </div> <img src="public/images/maison-slide-3.png" class="first-image position-absolute placement-image"> <div class="position-first-plan w-100 text-center position-absolute d-flex justify-content-center"> <img src="public/images/velo.png" class="mouse-move-x z-index2"> </div> </div> <div id="step4" class="step piling"> <div id="presentation" class="container"> <div class="row justify-content-center"> <div class="col-8 text-center"> <span class="d-block h2 sub-title font-weight-light text-uppercase"><span class="font-weight-bold">Piraino</span> - Constructeur de maisons dans le Nord</span> <p class="font-weight-bold mt-3">Quel que soit le type de maison individuelle que vous souhaitez, faites confiance à Constructions PIRAINO.</p> <p class="px12">Avec plus de 29 ans d’expérience dans la construction de maisons sur-mesure, notre entreprise a développé une expertise sans égale, ce qui nous permet d’être leader sur le marché de la construction. À l’heure actuelle,e sont 29 années qui consolident chaque jour nous comptons bon nombre de projets à notre actif. Alors, si vous aussi, vous avez un projet de construction dans le Nord, choisissez PIRAINO, constructeur de maisons individuelles.</p> </div> <div class="col-12"> </div> </div> <div class="row my-5 justify-content-center"> <div class="col-lg-2 col-6 px-lg-0"> <div class="block text-center"> <div class="block-image"> <img src="public/images/ico-mains.png"> </div> <p><span class="text-green d-block">29</span> Années d'expérience</p> </div> </div> <div class="block-separation d-lg-flex d-none"> ............... </div> <div class="col-lg-2 col-6 px-lg-0"> <div class="block text-center"> <div class="block-image"> <img src="public/images/ico-structure.png"> </div> <p><span class="text-green d-block">201</span> Maisons construites par an</p> </div> </div> <div class="block-separation d-lg-flex d-none"> ............... </div> <div class="col-lg-2 col-6 px-lg-0"> <div class="block text-center"> <div class="block-image"> <img src="public/images/ico-prof.png"> </div> <p><span class="text-green d-block">110</span> Professionnels</p> </div> </div> <div class="block-separation d-lg-flex d-none"> ............... </div> <div class="col-lg-2 col-6 px-lg-0"> <div class="block text-center"> <div class="block-image"> <img src="public/images/ico-couple.png"> </div> <p><span class="text-green d-block">274</span> Maisons déjà réalisées</p> </div> </div> </div> <div class="row"> <div class="col-lg-12 text-center"> <p class=" px12">Ce sont 29 années qui consolident chaque jour notre savoir-faire, la satisfaction de nos clients et la volonté de notre équipe de donner le meilleur.</p> </div> </div> <div class="row my-5"> <div class="col-lg-12 text-center d-flex justify-content-center align-items-center"> <a href="" class="btn btn-black">DECOUVRIR LE GROUPE</a> <a href="" class="color-black"><i class="fas fa-chevron-right ml-3"></i></a> </div> </div> </div> </div> <div id="step5" class="step piling"> <div id="etapes" class="container"> <div class="row justify-content-center py-5"> <div class="col-8 text-center"> <span class="sub-title h2 d-block color-black font-weight-light text-uppercase">Vous prêter main-forte à chaque étape</span> <p class="font-weight-bold">Du sur-mesure pour la construction de votre maison individuelle.</p> <p class="px12">Contemporaines ou traditionnelles, plain-pied ou sur niveaux, nos maisons font aujourd’hui la fierté de nos équipes qui vous offrent un aperçu de leur travail par le biais de diverses réalisations et de pavillons témoins. Vous pouvez d'ailleurs visiter ces derniers quand bon vous semble.</p> </div> </div> <div class="row my-5 pt-5"> <div class="col-lg-4 col-12"> <div class="bg-blue shadow p-4 px-5 position-relative"> <div class="terrain text-center position-absolute text-center w-100"> <img src="public/images/image-terrain.png" class="img-fluid"> </div> <span class="sub-title font-weight-bold text-uppercase">Créer votre avant-projet</span> <p>Avant de songer à votre future habitation, vous devez trouver le terrain sur lequel la construire. C’est pourquoi PIRAINO – constructeur de maisons dans le Nord-Pas-de-Calais – vous met en relation directe avec des promoteurs susceptibles de vous fournir ce que vous recherchez.</p> <a href="" class="btn btn-white text-uppercase m-auto">NOS TERRAINS</a> </div> </div> <div class="col-lg-4 col-12"> <div class="bg-green shadow p-4 px-5 position-relative"> <div class="projet text-center position-absolute text-center w-100"> <img src="public/images/image-projet.png" class="img-fluid"> </div> <span class="sub-title font-weight-bold text-uppercase">Dénicher le<br> terrain idéal</span> <p>Matériaux, configuration des pièces, style : à cette étape, tout est possible ! Comptez sur nos professionnels pour transposer vos désirs en des maquettes faites sur-mesure. Vous manquez d’idées ? Alors, consultez quelques-uns de nos avant-projets pour retrouver l’inspiration. </p> <a href="" class="btn btn-white text-uppercase m-auto">Creer votre espace</a> </div> </div> <div class="col-lg-4 col-12"> <div class="bg-kaki shadow p-4 px-5 position-relative"> <div class="maison text-center position-absolute text-center w-100"> <img src="public/images/image-maison.png" class="img-fluid"> </div> <span class="sub-title font-weight-bold text-uppercase">Construire votre maison</span> <p>C’est ici que tout se concrétise ! Et pour que notre collaboration se passe au mieux, nous veillerons à ne pas brûler les étapes et à vous proposer des garanties ainsi qu’un SAV adapté. Cela nous permet de vous assurer un résultat final à la hauteur de vos attentes.</p> <a href="" class="btn btn-white text-uppercase m-auto">NOS REALISATIONS</a> </div> </div> </div> </div> </div> <div id="step6" class="step piling"> <div id="actualites" class="container"> <div class="row"> <div class="col-12 text-center"> <span class="h2 d-block font-weight-light text-uppercase">Actualités CONSTRUCTIONS <span class="font-weight-bold">PIRAINO</span> </span> </div> </div> <div class="row my-5"> <div class="col-lg-4 col-12"> <div class="bg-white shadow px-4 py-5"> <span class="sub-title font-weight-bold text-uppercase">Portes ouvertes à CYSOING</span> <p class="font-weight-light">Nous vous invitons à notre PORTES OUVERTES à Cysoing du 22 au 24 mars 2019. Venez ...</p> <div class="text-center"> <img src="public/images/image-example-actu.png" class="img-fluid"> </div> </div> </div> <div class="col-lg-4 col-12"> <div class="bg-white shadow px-4 py-5"> <span class="sub-title font-weight-bold text-uppercase">Portes ouvertes à MARCHIENNES</span> <p class="font-weight-light">Nos clients vous ouvrent leurs portes les 23 et 24 mars. Découvrez cette superbe maison ...</p> <div class="text-center"> <img src="public/images/image-example-actu.png" class="img-fluid"> </div> </div> </div> <div class="col-lg-4 col-12"> <div class="bg-white shadow px-4 py-5"> <span class="sub-title font-weight-bold text-uppercase">Salon Immotissimo Lille 2019</span> <p class="font-weight-light">Soyez accompagné de A à Z dans votre projet Immobilier!Salon Immotissimo : La ...</p> <div class="text-center"> <img src="public/images/image-example-actu.png" class="img-fluid"> </div> </div> </div> </div> <div class="row my-5"> <div class="col-lg-12 text-center d-flex justify-content-center align-items-center"> <a href="" class="btn btn-black">TOUTES LES ACTUALITÉS</a> <a href="" class="color-black"><i class="fas fa-chevron-right ml-3"></i></a> </div> </div> </div> </div> <div id="step7" class="step piling"> <footer> <div class="container"> <div class="row"> <div class="col-12 text-center"> <span class="h2 d-block font-weight-light font"><span class="text-uppercase d-block">La réponse à votre projet est chez nous</span> <span class="font-weight-normal px14">Nos marques pour satisfaire vos envies.</span> </span> </div> </div> <div class="partenaire row"> <div class="col-lg-3"> <div class="row"> <div class="col-lg-12 text-center my-5"> <img src="public/images/piraino-fond-blanc.png" alt=""> </div> <div class="col-lg-12 text-center"> <p>Résolument moderne, le style PIRAINO se reconnaît et s'apprécie à la personnalité qu'il donne à votre habitation. </p> </div> </div> </div> <div class="col-lg-3"> <div class="row"> <div class="col-lg-12 text-center my-5"> <img src="public/images/piraino-prestige.png" alt=""> </div> <div class="col-lg-12 text-center"> <p>Quand votre idée du prestige rencontre notre savoir-faire architectural </p> </div> </div> </div> <div class="col-lg-3"> <div class="row"> <div class="col-lg-12 text-center my-5"> <img src="public/images/maison-klea-logo.png" alt=""> </div> <div class="col-lg-12 text-center"> <p>Et Piraino créa Kléa, pour sortir des maisons standardisées et entrer dans une gamme de maisons entièrement personnalisables. </p> </div> </div> </div> <div class="col-lg-3"> <div class="row"> <div class="col-lg-12 text-center my-5"> <img src="public/images/maison-eureka.png" alt=""> </div> <div class="col-lg-12 text-center"> <p>Et Piraino créa Kléa, pour sortir des maisons standardisées et entrer dans une gamme de maisons entièrement personnalisables. </p> </div> </div> </div> </div> <div class="row justify-content-end pt-5"> <div class="col-auto pr-0"> <a href=""><img src="public/images/facebook.png"></a> </div> <div class="col-auto pl-0"> <a href=""><img src="public/images/instagram.png"></a> </div> </div> <div class="row justify-content-between pt-2"> <div class="col-auto"> <div class="row"> <div class="col-auto pr-0"> <a href="" class="btn btn-black">CONTACT</a> </div> <div class="col-auto"> <a href="" class="btn btn-white">PRENDRE RENDEZ-VOUS</a> </div> </div> </div> <div class="col-auto"> <form action="" method=""> <input type="text" name="opportunite" class="opportunite" placeholder="Saisissez les opportunités Abonnez-vous à la newsletter"> <input type="submit" value="OK"> </form> </div> </div> <div class="row pt-5"> <div class="col-lg-12 text-center"> <img src="public/images/geocalisation-footer.png">142 Rue du haut Vinage - 9290 WASQUEHAL- Tél. : <a href="tel:0361080223" class="color-black">03.61.08.02.23</a> </div> </div> </div> </footer> </div> </main>

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

@adamoc Unfortunately working with barba most certainly results in a pretty complex bit of code, that isn't that easy for me to get my head around, if I didn't write it myself. But what you can do in barba is the following just as an example. You can give your index.html the barba-namespace 'index' and your about.html the barba-namespace 'about', which you set up in your html-files like so. In your index.html it could be like this: <main data-barba="container" data-barba-namespace="index"> This will come in very handy for triggering different functions on transition to different pages. When you initialize barba you can then access these namespaces in VIEWS like so: barba.init({ // Some options here transitions: [ { name: 'default', // Available hooks like… beforeOnce( current, next, trigger ) { ... }, // More hooks regarding this transition here... }, // More transitions here.... ], views: [ { // Actions taken ONLY when certain page is viewed. namespace: 'index', // Available hooks… afterEnter(data) { playYourAnimationForTheHomepage(); }, // More hooks regarding this namespace only... }, // More namespaces, like maybe 'about' for your about.html ... ], ... In that views-section you can run functions that will only be triggered on a certain hook for when a certain namespace/page is being viewed. If I understood correctly, this might be the right path to a solution for your problems. Read more about views here. https://barba.js.org/docs/advanced/views/ But beware - I think the hooks for views differ from the global hooks that are available in barba and the hooks for transitions.

You only need to initialize Barba on the page load (no matter what the first page is). After that it should be loaded. I'm not following. I think you should try to look up some resources on how to structure things with barba.js. I think looking at how other people do it could be helpful. It's not really related to GSAP.

Whoop whoop , after a little bit of tweaking and yere help she's working perfectly. Thanks a million lads ( @ZachSaucier @akapowl @mdelp) . I do have a question though as this hook runs after each transition say if I wanted to start a timeline on the projects page - using anotherJS file. First of all , would I have to initialize Barba again in this file considering i'm using it already to get onto this page ?? Secondly the fact that these elements aren't on the homepage, so when I then initilize and create references to them on the second JS file if i transition to another page and back to this page how do I reference them in this page without barba or the hook. I just think that if i do it on the homepage.js it would all get very cluttered and this page wouldn't have access to the objects on the other page (or maybe it would as it's just swapped in so now the DOM does have access to it ) I really don't know. I'm just looking for clarity as to how to expand my program i guess , and when i do so, do i keep needing to rereferencing objects and functions in that same hook on that JS file or can i spread it out to other JS files ?? Cheers Adam Finished Product - https://adamoceallaigh.netlify.app/

Like this: 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 init = () => { 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')) } barba.hooks.afterEnter(() => { logo_tl_func() init() hamburger_display_button.onclick = () => { opened_nav_buttons.classList.toggle('open') }; }); ??