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>