Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for 'barba'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. 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); }, }], });
  2. 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..
  3. 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/
  4. 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
  5. @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!
  6. @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.
  7. 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
  8. 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>
  9. 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
  10. @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".
  11. @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.
  12. 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.
  13. 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/
  14. 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') }; }); ??
  15. Thank you so much for your quick and informative replies . Okay I get what you are saying @mdelp and @akapowl and have updated my JS code to use a function to restart the timeline upon call in the hook all at once but it doesn't seem to be working and I can't tell why , it appears the individual tweens ( gsap.to) is working as the heading is being pushed in upon homepage revisit after navigating with barba , and this is enabled by using a seperate tweens and not a timeline , so is it a problem with the timeline ??. But then I have tried to use a hamburger button in the phone version it pops up and i tried to click it and i'm able in the first instance but seems that script stops working upon return after barba navigation . I've tried putting the code back into the hook (beforeAfter as indicated above) and to no avail , and as indicated above I think if i put another script in to tod something subsequent to the gsap it probably wouldn't work either so how do i get around this issue or fix my existing code to basically refresh all the scripts, like the function window.load or $(document).ready(()=>{}) would do ?? //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 logo_tl_func = () => { let logo_tl = gsap.timeline({ onComplete: moveLogo, }) // Morphing into the Logo logo_tl.staggerFrom(shapes, 1, { y: -600, autoAlpha: 0, ease: "bounce" }, 0.15) logo_tl.staggerTo(shapes, 1, { fill: '#F0C368', }, 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]) console.log('Well you should have animated rn') } 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.fromTo('.logo_heading', { x: 1340, y: 20 }, { 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.to('.loading_container', { duration: 1.2, width: "100%", left: "0%", ease: "Expo.easeInOut", }) .to('.loading_container', { background: "#f0c368" }) .to('.loading_container', { duration: 1.2, width: "0%", right: "0%", ease: "Expo.easeInOut", }) } // 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: [{ async leave(data) { const done = this.async(); pageTransition(); await delay(1000); done(); }, async enter(data) { window.scrollTo(0, 0); }, }] }); // barba.hooks.enter(() => { // }); barba.hooks.afterEnter(() => { logo_tl_func() hamburger_display_button.onclick = () => { opened_nav_buttons.classList.toggle('open') }; }); https://adamoceallaigh.netlify.app/ Cheers , Adam
  16. Hey @adamoc. Seems like you are having issues similar to what mine were about. This here is probably what is most important to get your head around with barba: Everything inside the barba container will get removed on transitioning to another page and will be replaced with the content inside the barba-container of the page you are aiming at. When you revisit the initial page then, the content is loaded fresh. Every timeline you might initiate on load of window e.g., will be aiming at those elements that are there on load and will stay 'connected' to these even when they are removed on transition. But since they actually are not there anymore - but have been replaced - when you come back to this page, you won't see anything happen. You will have to find a way to reinitiate the timeline for page-specific elements everytime you transition to that page, just like @mdelp suggested above. Hope this helps clear things up a bit. There is a lot to consider when using something like barba.
  17. Hi adamoc, I was able to get everything working by making sure that all my functions that are located inside the barba-container (i.e. the content container that gets replaced) get reloaded everytime a barba transition ends. So basically, let's say you have a function: function function_name() { // Function } You have to reinit that function everytime a page transition ends, using a Barba hook: barba.hooks.afterEnter(function() { function_name(); }); More info on the Barba hooks: https://barba.js.org/docs/advanced/hooks/ Functions that are inside the wrapper, but not the container (so the functions that do not get replaced every page transition) do not have to be releoded.
  18. Hey Wousto and welcome to the GreenSock forums! The animation aspect of this sort of page transition is the easy part. Actually changing out the content is a little more complicated. For the animation: Make a full screen element that has position: fixed and is placed outside of the bottom of the viewport. In GSAP that'd look something like this: gsap.set(".overlay", {yPercent: 100}); Create an animation that translates the overlay from yPercent 100 to a yPercent of 0. Something like gsap.to(".overlay", {yPercent: 0});. Then pause that animation when it's created (using paused: true). Create another animation for the outro of the overlay, this time going above the viewport: gsap.to(".overlay", {yPercent: -100});. Make sure this is also paused. To set up the changing of content, it's likely best to use something like barba.js to help you switch out the content. It has callbacks for the important parts of the transition. Once you get things setup with barba this is basically the process that will happen: When a link is clicked, intercept the normal behavior and fire the intro animation for the overlay. At the same time, start loading the next page's content. Once the page's content has been loaded (at least the beginning part of it), start the outro animation for the overlay. Optionally fire any on load animations on the new page's content. Does that basic process make sense?
  19. Hi there , I have read this thread as I have come back into this problem too . My problem is before transitioning the timeline loads perfectly and executes as i want however after transitioning to another page and then clicking back to the home screen the timeline doesn't play half the tweens specifically the part animating my logo. I believe after reading the thread it might come down to the fact as @mdelp has implied that elements targeted with a timeline inside the barba container are removed or replaced but I have no clue how to go about fixing this problem as i need all this content withing barba container. Here's a link to my website where you will find the problem occuring if you follow the steps outlined above -> Move to different page and then back to homepage again - https://adamoceallaigh.netlify.app/ Cheers, Adam
  20. I may be completely wrong (someone correct me) but does Barba.js work correctly in regular Codepens I can't recall seeing it? Try instead using a Codepen Project that will work better for this sort of thing. I believe that is the issue you are encountering and nothing related to GSAP itself.
  21. Hey Sanjana and welcome to the GreenSock forums! This sort of thing likely is more complicated than what you think. Optimally you wouldn't even need a loading screen, you could just fade out the previous page's content and transition in the new content. But if you do need a loading screen, you likely want to use something like Barba.js to help you detect when the new content is loaded. With that being said, if you don't want to wait for the entire timelines to reverse you can move the playhead to the beginning immediately instead. A good way to do that is to use .pause(0). https://codepen.io/GreenSock/pen/zYrrGJX?editors=0010 Some side notes: You had some pointless .delays that I removed. It's best to use the position parameter instead of delay when you're using timelines. It's good to use functions to make your code more DRY (don't repeat yourself). I write more about doing that in my article on animating efficiently. In GSAP 3 we recommend that you put the duration in the vars parameter so that you can use defaults. You don't need yoyo: true on all of your timelines.
  22. Thanks a lot @Yannis Yannakopoulos. Your answer really helps as it confirms my assumption. I have now found the events the theme dispatches before and after the transitions (it's not barba js but gsap they're using btw) and I'm listening for transitionOutStart (here I want to kill ScrollTrigger and transitionsDone (here I'll have to initialize ScrollTrigger if used on that page). But I don't really know on how to use ScrollTrigger.kill() as it's not orking as expected. This is how I init ScrollTrigger: gsap.registerPlugin(ScrollTrigger); let tl = []; let projects = ['omrfestival', 'mini', 'porsche', 'boa', 'dinnerberlin']; for (i = 0; i < projects.length; i++) { let tl = gsap.timeline({ scrollTrigger: { trigger: ".portfolio--" + projects[i], start: "top 70%", end: "top 55%", } }); tl.addLabel("animateTitle") .fromTo(".portfolio--"+projects[i]+" .portfolio__heading", {opacity: 0, x: -50}, {opacity: 1, x: 0, duration: 0.8}) .addLabel("animatePlane") .fromTo(".portfolio--"+projects[i]+" .portfolio-img__plane", {opacity: 0, scaleX: 0, transformOrigin:'0% 0%', ease: "expo. out"}, {opacity: 1, scaleX: 1, duration: 0.5}, "-=0.3") .addLabel("animateImage") .fromTo(".portfolio--"+projects[i]+" .portfolio-img__image", {opacity: 0, x: -10}, {opacity: 1, x: 0, duration: 0.6}, "-=0.2") .addLabel("animateDesc") .fromTo(".portfolio--"+projects[i]+" .portfolio__desc", {opacity: 0, x: -10}, {opacity: 1, x: 0, duration: 0.6}, "-=0.2") .addLabel("animateCTA") .fromTo(".portfolio--"+projects[i]+" .portfolio__cta", {opacity: 0, x: -10}, {opacity: 1, x: 0, duration: 0.6}, "-=0.2"); } And here's the eventListener (function($) { function exitPage() { console.log("sempliceTransitionOutStart"); if (tl !== undefined) { tl.kill(); console.log("kill ScrollTrigger"); } } function transitionsDone() { console.log("sempliceTransitionsDone"); } window.addEventListener("sempliceTransitionOutStart", exitPage ); window.addEventListener("sempliceTransitionsDone", transitionsDone ); })(jQuery); In the console it show me that the kill section is beeing called but it doesn't destroy it as expected. I've tried both: tl.kill() and ScrollTrigger.kill(). None of them is working. What am I doing wrong? Thanks so much for the help! PS: I know that the code above can be optimized. I'm just strating to get into JS. I think utils.toArray() is what I'll have to look into next, right?
  23. That's expected behaviour and indeed is related to Barba.js. When you first load a page, everything is there for ScrollTrigger to pick up. Meaning the DOM does have the elements you pass to ScrollTrigger. When you navigate to a page using Barba.js, the DOM changes (the old container is removed and the new is added) and ScrollTrigger (or any other script), can't 'listen' the events of these newly added elements. You have to destroy the previous instance of ScrollTrigger and reinitialise it, passing it the new elements. Barba gives you several hooks to work with (i believe the one you need is beforeEnter) so on that hook, you could use the next object, to find the new elements you want to pass to ScrollTrigger. Something like this: beforeEnter: ({ next }) => { const items = next.container.querySelectorAll('whatever you want') }, You can check the docs, they mention how to work with third party scripts. You need a similar logic with this. Regarding your second question, i believe you don't need ScrollTrigger at all (or either headroom.js). You can use your own function to detect if the user scrolls up or down and then use gsap for the animation of the header. Be sure to hook your function in requestAnimationFrame or gsap.ticker for better performance on scroll.
  24. CodePen projects aren't very forkable... So here's untested code function delay(n) { n = n || 2000; return new Promise((done) => { setTimeout(() => { done(); }, n); }); } function pageTransition() { var tl = gsap.timeline(); tl.fromTo(".loading-screen", {width: 0, left: 0}, { duration: 1, width: "100%", left: "100%", ease: "expo.inOut", delay: 0.3, }); tl.to("#svg-1", { duration: 1, opacity: 0, y: 30, stagger: 0.4, delay: 0.2, }); tl.to(".loading-screen", { duration: 1, width: "100%", left: "100%", ease: "expo.inOut", delay: 0.3, }); tl.set(".loading-screen", { left: "-100%", }); tl.set("#svg-1", { opacity: 1, y: 0 }); } function contentAnimation() { var tl = gsap.timeline(); tl.from(".animate-this", { duration: 1, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 }); } $(function () { barba.init({ sync: true, transitions: [ { async leave(data) { const done = this.async(); pageTransition(); await delay(2000); done(); }, async enter(data) { contentAnimation(); }, async once(data) { contentAnimation(); }, }, ], }); }); I don't know if you can change the cursor with only JS... You can just set it in CSS: .loading-screen { cursor: progress; }
  25. Thanks @ZachSaucier, fantastic. Could you show what I should change in this snippet and also how to not mixing ease formatting? function delay(n) { n = n || 2000; return new Promise((done) => { setTimeout(() => { done(); }, n); }); } function pageTransition() { var tl = gsap.timeline(); tl.to(".loading-screen", { duration: 1, width: "100%", left: "0%", ease: "Expo.easeInOut", }); tl.to("#svg-1", { duration: 1, opacity: 0, y: 30, stagger: 0.4, delay: 0.2, }); tl.to(".loading-screen", { duration: 1, width: "100%", left: "100%", ease: "Expo.easeInOut", delay: 0.3, }); tl.set(".loading-screen", { left: "-100%", }); tl.set("#svg-1", { opacity: 1, y: 0 }); } function contentAnimation() { var tl = gsap.timeline(); tl.from(".animate-this", { duration: 1, y: 30, opacity: 0, stagger: 0.4, delay: 0.2 }); } $(function () { barba.init({ sync: true, transitions: [ { async leave(data) { const done = this.async(); pageTransition(); await delay(2000); done(); }, async enter(data) { contentAnimation(); }, async once(data) { contentAnimation(); }, }, ], }); }); Would be very helpful
×