Search the Community

Hi, I'm currently working on a website using Gsap ScrollTrigger. What I'm trying to achieve is showing a "previous-next post" button when the user has reached the bottom of the page. Which is working almost ok when the page is not resized. So on the page I have 2 scrollTriggers: 1. A horizontal gallery of images (with a media match) 2. The previous-next button. 1: let slider = document.querySelector('.hor-slide--project'); setTimeout(function(){ ScrollTrigger.matchMedia({ "(min-width: 992px)": function() { gsap.to(slider, { x: () => -(slider.scrollWidth - document.documentElement.clientWidth) + 'px', ease: 'none', scrollTrigger: { trigger: '.hor-slider-container', start: 'top top', //pinReparent: true, invalidateOnRefresh: true, pin: true, // scrub: .25, scrub: 0, // end: () => '+=' + slider.offsetWidth // end: 4000, end: () => slider.scrollWidth, } }); }, }); }, 1); 2: setTimeout(function(){ ScrollTrigger.create({ trigger: '.single-project', start: 'bottom bottom+=50px', //end: 'bottom bottom', invalidateOnRefresh: true, //markers: true, onEnter: self => { gsap.to('.prev-next', 1, {y: '-100%', ease: Expo.easeOut}) }, onLeaveBack: self => { gsap.to('.prev-next', .5, {y: '0', ease: Expo.easeOut}) } }); }, 100); I'm using setTimeout because in addition to gsap scrollTrigger I'm using Barba.js, and I need to delay, but it doesn't seem to be the problem, I removed the setTimeout and the problem still occurs. For the second scrollTrigger, I have used onEnter and onLeaveBack, this might not be the best way but that's the only way I found so far (I might be part of the problem), so 50px before the bottom of the '.single-project' block reach the bottom of the viewport (start: 'bottom bottom+=50px'), show the prev-next, otherwise hide it. The problem is that when I resize the window from mobile (< 992px) to desktop (> 992px), the prev-next button is now showing to early, before I reach the bottom of the page. Step to reproduce the bug: 1. Load the page on desktop, scroll to the bottom, the prev-next is showing (great) 2. Resize the window (< 992px), the first horizontal gallery scroll is "killed", scroll to the bottom, the prev-next is still showing at the right time (amazing) 3. Re-resize the window (> 992px), the first horizontal gallery is "recreated", and now if you scroll around the page, you can see prev-next showing too early, before you reached the end of the page. I tried refresh and also invalidateOnRefresh true or false, without success, it doesn't want to work. I guess I'm doing something wrong, probably the way I try to show the prev-next, using onEnter and onLeaveBack. Must be a more clever way to do that. Thank you.

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/

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

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/

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?

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

Hard to say what the issue was without seeing a demo that reproduces the error. My guess is that you're trying to use modules in an environment that doesn't support it. That's because you have the tweens inside of the function. Here's what's happening: You create the timeline. Since the timeline is not paused, it tries to play. Since there's nothing to play, it finished immediately. You then call the function. The function adds new tweens to the timeline. But the timeline is already done so it doesn't play them. What you should do instead is create the timeline with all of its tweens before the function call. Then inside of the function you use the .play() control method to play the timeline. Note that I also upgraded your code to GSAP 3 while I was at it. https://codepen.io/GreenSock/pen/QWjqWBM?editors=0010 If you want that to fire on click instead, you should prevent the default behavior of the click event and call that function. This is part of what Barba.js would do for you. Barba also loads the next page's context and updates the page history so that you can load new content without actually going to the other page(s). https://codepen.io/GreenSock/pen/WNQZNgO?editors=0010 I highly recommend that you give the GSAP Getting Started article a read as well as my article on tips to animate efficiently because it talks about using control methods.

Alright update: My main problem seems to be GSAP setup, I tried with a earlier project where I had succes with GSAP and the animation worked there after changing transformOrigin from "bottom left" to "left bottom". So now the animation works! Now I just either have to setup Barba.JS correctly or do what ZachSaucier suggested. If anyone can advocate why Barba.JS is a better solution or/and why my script from the video doesn't work, I would appreciate it very much!

Hey itsmeagian and welcome to the GreenSock forums! It looks like you didn't follow the tutorial which uses Barba.js. Was that intentional? If you're not going to use Barba.js, you will need to handle the link clicking behavior yourself - preventing the default behavior of the link(s) and calling the animation yourself.

It's really not working all the way. If you change the duration, it won't complete. It should wait 10 seconds before showing the next page. Locally it will work fine. It's just something with codesandbox's environment. 🤷‍♂️ barba.init({ transitions: [ { name: "opacity-transition", leave(data) { return gsap.to(data.current.container, { opacity: 0.2, duration: 10 }); }, enter(data) { return gsap.from(data.next.container, { opacity: 0.8, duration: 10 }); } } ] });

Yes, about him. It's just that if codesandbox couldn't work with barba, then the usual opacity wouldn't work, right?

By the way, this code works, but why doesn't the other option work? barba.init({ transitions: [{ name: 'opacity-transition', leave(data) { return gsap.to(data.current.container, { opacity: 0.2 }); }, enter(data) { return gsap.from(data.next.container, { opacity: 0.8 }); } }] });

I don't know what to tell you. Flip is working as intended. IF you need help with Barba, it would be best to ask questions over on their slack. https://join.slack.com/t/barbajs/shared_invite/enQtNTU3NTAyMjkxMzAyLTkxYWUwZmM1YWQxMmNlYmE0ZjY4NDQxMGUxYjkwYWFlMzEzOWM4OTRhMWRmYTQyYzFlMmQ3OGFmYmI3MWY0OWY If you need finer control over the loading process, perhaps try using a framework with a router, like Vue. https://codepen.io/GreenSock/pen/eYdXZJZ

Unfortunately, it does not work... Even if I add @id to img in data-flip-id, so that it is different, because img must be different in this data. But it doesn't work out... And on pages like cases.html there should be such a block... There may be a video inside the div.bgimage_block. Therefore, there is a block there. <div class="bgimage_block" style="background-image: url(https://img2.goodfon.ru/original/320x240/1/a1/bow-lake-banff-national-park.jpg); "> </div> Barba work, but without animation..

Of course it is! You first need a way of keeping track of the position of the clicked on element. You could do that in various ways, but likely the best is to use some sort of data representation of the position state. Then you need to transition between pages using that information. You should look into Barba.js to help you with handling page transitions and potentially posts on how to use GSAP with Barba. That's it

I made a project using your link! How to connect barba via beforeLeave/leave with Flip, so that it is like in the given reference in the topic? https://codesandbox.io/s/pedantic-lake-sh77z?file=/index.html:2921-3313 I worked with before in the Fullpage plugin once, but I suffered for three days then... I haven't found an example working on this functionality yet..😟 It feels like I'm missing some theoretical point in the stage, and because of this there is a deadlock...

I don't have time to look through all your code (in the future, please just post a minimal demo, not your whole site) but my guess is that your 2nd one is relying on elements/assets that haven't fully loaded or something like that. I'm not familiar with Barba.js but you probably need to wait for some kind of lifecycle event that basically says "okay, I'm done altering the layout of the page." and then you can call ScrollTrigger.refresh() which forces ScrollTrigger to update all its start/end values on the page. Also don't forget to kill() any ScrollTriggers when you leave a page (assuming it's a single page application).

Hi @jamaldols welcome to the GreenSock forums. This seems more like a Barba related question than GSAP. But have a look at this recent post and the linked CodePen project using GSAP 3 & Barba 2. https://greensock.com/forums/topic/22035-page-transition-with-gsap-and-barbajs/?do=findComment&comment=110399 Fork that and try building your desired result based upon that example, utilizing its a approach of leaveAnimation & enterAnimation to build your concept. Also you shouldn't need that helper.js delay function with the above approach.

I finally got a simple transition working with gsap 3 & barba V2! 🎉 The transition function that worked for me looks like this: function leaveAnimation(container) { return new Promise(async resolve => { await gsap .to(container, { duration: 1, opacity: 0, }) .then(); resolve(); }); } One really simple thing that took me a while to figure out was making the enter animation work. This was fixed by just adding css to make the barba container positioned absolute: .container { position: absolute; left: 0; top: 0; width: 100%; } I'm going to leave this working example here incase anyone else needs it to reference from.

Hi @Chriz welcome to the forum. I see you bumped another thread asking for examples. In case you were unaware the video series you posted above has a link to download the working files in the description (click "show more"). Please note however that the tutorial you referenced uses the older version of both GSAP and Barba. So if you are just getting started on your journey with each, then I would highly suggest using GSAP 3 and Barba v2.

Actually, locally it shouldn't be working as intendend at all, since barba's ajax requests require a server environment to be working in the first place. I am using VS-Code's local server extension for testing - but there it doesn't work as intended neither. I just tried reverting back to TweenMax v2.1.2 because I was absolutely sure, that it worked with that version - but I was proven wrong. It doesn't work with that version neither - so I guess it must be an issue related with Barba rather than with GSAP. Dang...

Hey there! I don't know if this is or might be related but I am still going to post it here instead of opening a new thread, because I think it might be a related problem. Since upgrading to GSAP v3 I noticed some issues with timelines, too, when using with Barba.js. My transition-animations (set-up when GSAP v2.x was still in use) still work as fine as before, but when I am trying to play any timeline (even when it was set up in global scope) after the transition has finished, it won't play the animations of that timeline at all. This seems pretty odd, because onComplete-functions or .then-functions included in those timelines are being executed as expected. I hope this is somewhat understandable - don't know how to set up a codepen that would be working with barba-transitions. Any idea what the problem might be?