Jump to content
GreenSock

Wousto

GSAP vertical transition

Recommended Posts

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 :)

Link to comment
Share on other sites

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? 

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Hi @Wousto you can use ScrollTrigger plugin, check this demo 

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen

16 minutes ago, Wousto said:


gsap.to(container, 1, {scrollTo:{y: ih * activeSlide, autoKill:false},ease: Power4.easeOut})

And one more thing, duration have other sintax in gsap 3 

gsap.to(".box", {rotation: 27, x: 100, duration: 1});

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

@Wousto Can you create simple codepen demo

This code from ScrollTrigger demo doesn't help you?

gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray(".panel").forEach((panel, i) => {
  ScrollTrigger.create({
    trigger: panel,
    start: "top top", 
    pin: true, 
    pinSpacing: false 
  });
});


ScrollTrigger.create({
  snap: 1 / 4 // snap whole page to the closest section!
});

 

Link to comment
Share on other sites

4 hours ago, Wousto said:

As you can see on this website : http://piraino.preprod-14h28.com/

On my mac that scroll extremely  fast when I use my touchpad or magic mouse, as does the the first 3 sections of the CodePen demo that you linked. I recommend not hooking directly into the wheel event like that. I recommend doing whatever effects you need to do using ScrollTrigger.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×