Wousto

@Nekiy2 The codepen :https://codepen.io/mathieu-marteau/pen/oNbwNyp I having commented the moment when i want piling Thank's

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>

Hello ! Sorry for the late reply, i was working on the website development. Big thanks to you @ZachSaucier for all your advices.Thanks to you all i finally see the end of the road, but there's a last thing i don't know how to execute. As you can see on this website : http://piraino.preprod-14h28.com/ Everything's working well with a nice transition on the 3 first slides. But, i'd like to make a thing : when you're on the third slide, the next slides overlap one over eachother. (Ex : https://alvarotrigo.com/pagePiling/#page4)I'm actually making my transition with this line of code : gsap.to(container, dur, { y: offsets[activeSlide], ease:“power2.inOut” }) I tried to execute this line of code from the third slide : gsap.to(container, 1, {scrollTo:{y: ih * activeSlide, autoKill:false},ease: Power4.easeOut}) But this doesn't seem to work ..., the "scrollTo" isn't working, even if I take care to import the plugin extension's at the very start. And no error is returned.Do you guys have some kind of magical/holy solution to help me on this very last issue i'm facing ? Thank's in advance for all the help you can bring to me ^^

Hello everyone ! I'm using your library for a long time now and trully loving it. But today i'm trying to create a custom transition like the one you can see on this page when you click on the website logo : https://haerfest.com/blogs/explore/apollo-collection The website is using some kind of white block to make the transition, but i can't figure how to reproduce it with the GSAP3 library... The transition have to work on a scroll event, with a slide effect like the one you see on the example website. Do you guys have an idea on how proceed ? Thank's in advance :)