Jump to content
GreenSock

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. Well, I guess that is very well more related to the way barba works, than it is a GSAP issue. You have to kill the 'old' ScrollTriggers on page transition and re-initialize them fresh on entering the new page. What worked for me was this nifty piece of code I grasped from Jack or Zach once (don't know which one of you it was) let triggers = ScrollTrigger.getAll(); triggers.forEach( trigger => { trigger.kill(); }); You will have to find the right barba-hooks for your project to kill the 'old' ScrollTriggers and re-initialize the 'new', though. Hope this helps a bit. Cheers, Paul
  2. 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
  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. Same problem. I am using a plugin called Steroides for Elementor that include Barba.js but I can't get it work.
  5. @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.
  6. For any future readers, I ran into a very similar problem as Adam and was able to solve it with ScrollTrigger’s getAll() and kill() functions. Added to Barba’s afterEnter hook. My ‘cleanGSAP’ function looked like this: const cleanGSAP = () => { let existingScrollTriggers = ScrollTrigger.getAll(); for (let index = 0; index < existingScrollTriggers.length; index++) { const singleTrigger = existingScrollTriggers[index]; singleTrigger.kill(false); } ScrollTrigger.refresh(); window.dispatchEvent(new Event("resize")); };
  7. 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>
  8. 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.
  9. 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/
  10. 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?
  11. 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
  12. I read your question a few times but I still don't quite understand what you're asking. We don't support 3rd party tools like Barba.js in these forums typically (I have zero experience with it), but we'd be happy to answer any GSAP-specific questions.
  13. I have page transitions with barba.js and a certain element is not always on the page to be animated. So gsap gives a warning that the target is not found. Can I just disable warnings in my production env. Or is there a good way to not let a certain part of the animation timeline play, when the target isn't found?
  14. 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.
  15. 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!
  16. 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.
  17. 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
  18. I've been using GSAP for a couple of month now and i really really enjoy it! Right now, i'm working on my portfolio using Barba.js for page transitions. I have a little question that might sound weird for a non-beginner but here it is : Let's say i have a long page with a lot of content. How do you animate only the elements that are visible in the viewport when leaving the page ?
  19. Hey @Perdixo75 That is really more of a general JS and barba-related question and usually these forums try to stay focussed on things that are directly related to GSAP. What you would have to do before animating is checking for which of the elements that you want to animate are in view currently - for example with a helper function similar to the one explained here That could then look something like this https://codepen.io/akapowl/pen/5d29bd576ad634a694103346560caf3c Of course you would have to tweek it to your liking, because as of now it will only trigger on elements that are completely in view. If you have any other questions directly related to GSAP, we'll be happy to help. Happy tweening. Edit: Of course you could also utilize GSAP's ScrollTrigger to handle the in-view-checking like maybe so https://codepen.io/akapowl/pen/6158772cb43f78df7bc8c2fbcdfa83cf
  20. 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.
  21. 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.
  22. Hi there, I noticed that after going from one page to another the custom mouse starts to lag. At first it's hard to notice but as you load 4 or 5 pages the mouse doesn't flow as smoothly as on the first page load. Am I missing anything that is making the mouse lags? I'm using Barba JS on the site so I'm not sure if I have to kill and restart the mouse function every time I transition between pages? Here's the link to my project: https://codepen.io/rochudo/project/editor/ZgGnON Thanks
  23. 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.
  24. Hi, guys! I'm relatively new to the GSAP world and this is my first post over here. I'm trying to make something that I feel it's super simple, it would be an effect similar to https://www.marvinschwaibold.com/projects/'s hover effect (image reveal, following the mouse position, background color change) + the transition to its internal page (I'm assuming it involves barba.js, right?) Any tips will be much appreciated!
  25. Hi @mrntld Welcome to the forum. We have several threads about follow by mouse. Here's a good one. The background color change should be fairly straightforward. If you're just getting started with GSAP, this is the pace to begin. I'm not sure if they're using barba.js, but that's probably a good guess. Our very own @Ihatetomatoes has a bunch of videos on that topic. If you have any GSAP specific questions as you work on your project, we're happy to help. A demo will give you the best chance at a detailed answer. More info about that. Happy tweening and welcome aboard.
×