GSAP Scroll Trigger section going crazy sometimes (vidéo)

[Guest]

Hello i have a problem with my scroll trigger i have a sections with horizontal scrool and sometimes it is going on the above sections :

 

How it should be https://www.youtube.com/watch?v=rM0krYVJc0k

The bug https://www.youtube.com/watch?v=tMewL20fA3w

[akapowl]

Welcome to the forum @stevenrobert08

 

Yep, that definitely doesn't look like intended.

 

My guess would be it is something with sour start/end values on the ScrollTrigger or maybe you are creating your ScrollTriggers in a different order than they appear on your website. For the latter case you'd want to take a look at .sort() and/or setting a refreshPriority (which is explained on that same documentation page).

 

If that doesn't do the trick for you, please provide a minimal demo showing your issue in a setup as minimal as possible.

It is pretty tough to guess what might be causing your issue, since there are lots of various possibilities. Thanks

 

[Guest]

Thank you for your answer this is my code 

 

 

gsap.registerPlugin(ScrollTrigger);

let sections = gsap.utils.toArray(".school-content");

gsap.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: "#school",
    pin: true,
    scrub: 1,
    snap: 1,
    end: () => "+=" + document.querySelector("#school").offsetWidth,
  },
});

with the html

 

<section id="school">
            <h2>Mon<br> parcours</h2>
            <div class="underline"></div>

            <div class="school-contents">
                <div class="school-content">
                    <div class="school-content-left">
                        <p>2019</p>
                    </div>
                    <div class="school-content-right">
                        <div class="school-title">
                            <h4>BTS Alternance</h4>
                            <h5>“Bâtiment”</h5>
                        </div>
                        <h5 class="school-study">Lycée Le Corbusier</h5>
                        <p>Logiciel 2D/3D de création de plans de bâtiments, gestion de plusieurs projets, relations
                            clients. J'ai aussi développé des connaissances de la vie en entreprise en général, comme la
                            communication en équipe ou la gestion du projet avec un chef d'équipe.</p><br>

                        <p>Après cette formation je décide de me reconvertir et de faire une formation de développeur
                            web.</p>
                    </div>
                </div>
                <div class="school-content">
                    <div class="school-content-left">
                        <p>2020</p>
                    </div>
                    <div class="school-content-right">
                        <div class="school-title">
                            <h4>Formation</h4>
                            <h5>“Développeur intégrateur de solutions internet/intranet”</h5>
                        </div>
                        <h5 class="school-study">CCI Campus à Colmar</h5>
                        <p>Obtention d'un titre professionnelle BAC+2 en formation accéléré. Apprentissage du HTML/CSS,
                            PHP, JS avec Prestahop et Wordpress puis des projets a chaque fin de cycle afin de se mettre
                            dans des conditions réelles.</p><br>

                        <p>Pour finir, étant donné que mon stage de fin de formation au sein de l'agence Karedess s'est
                            bien déroulé, j'ai l'opportunité de poursuivre en licence professionnelle dans la même
                            agence.</p>
                    </div>
                </div>
                <div class="school-content">
                    <div class="school-content-left">
                        <p>2021</p>
                    </div>
                    <div class="school-content-right">
                        <div class="school-title">
                            <h4>Licence professionnelle</h4>
                            <h5>“Développement web et conceptions d'interface”</h5>
                        </div>
                        <h5 class="school-study">IUT de Haguenau</h5>
                        <p>Tout d'abord pour la partie formation en entreprise, j'ai essentiellement crée des sites
                            vitrines avec Wordpress, ainsi que le design et l'optimisation du SEO. Egalement, des sites
                            E-Commerce sur Prestashop (modification de template, thème...) et WooCommerce.</p><br>

                        <p>Ensuite, à l'IUT j'ai appris à utiliser Laravel et React. J'ai également crée quelques
                            projets avec ses technologies. Mais aussi de créer et d'optimiser une interface web au goût
                            du jour en fonction des besoins du client et une ergonomie adaptée au visiteur.</p>
                    </div>
                </div>
            </div>
        </section>

 

[akapowl]

 

I don't see anything particularly wrong with that code at a quick glimpse, and unfortunately that code alone is not very helpful because 

 

a) it might very well be related to CSS, the creation of your other ScrollTriggers (depending on when you create them, since you do have another pinning ScrollTrigger right before that section e.g., which might possibly not be respected for this fake-horizontal ScrollTrigger - in that case the documentation page I linked to will be helpful) or even something different.

 

and b) it is way easier for us to have an example to tinker with, if it is nothing obvious.

 

So if it is not related to creating your ScrollTriggers in a different order in your JS than they appear on your website, it would be awesome if you could please create a demo on a platform like codepen.io, minimal enough to easily look through but complete enough to showcase your issue.

 

In a lot of cases that even helps you find the cause of the issue yourself.

 

[Guest]

So i tried a lot of things moving my code first, last in the middle of my js and same for the html cdn's. I dont see what can cause the bug in my css, i dont have particular style.

 

There is my codepen 

See the Pen vYmrWPm by Nevets08 (@Nevets08) on CodePen

. I loaded my entire website, it is in section id school. It seems to work good on the codepen... but not in the browsers

Thank for taking your time for helping me

[akapowl]

 

That actually still is a whole lot of code to look through - like your whole website pushed into codepen.

Debugging live websites is actually way out of scope for what is offered as free support in these forums - that's why I asked for a minimal demo.

 

But I noticed that you appear to be loading content dynamically via JS after creating your ScrollTriggers, right (at least on your website, it appears not te be the loaded in codepen)? ...for example, your "Mes compétences" section is way taller in height on your website than it is in your codepen demo.

 

Since the ScrollTrigger can not know about that content being injected because it is already created, its start and end postion might be offset. It could also be the images not being fully loaded yet when you have already created your ScrollTriggers - and then they push down the subsequent content when they are, so the ScrollTrigger would also not have the correct values anymore. So maybe try calling ScrollTrigger.refresh() after the insertion of the extra content or create your ScrollTrigger after you inserted the new content to begin with - and/or create your ScrollTrigger in a loaded event for the images if you can not set a concrete height for the images via CSS beforehand.