Why is the position different every time the screen is reloaded when using gsap scrollTrigger?

[yino 0 Likes (Newbie)]

I am currently creating a page using gsap. When the screen is refreshed or strongly refreshed, the gsap markers are adjusted to a different position each time. If the slick slider is operating in the previous section, the gsap animation effect is entered for each section.

Does anyone know why this is happening and how to fix it?

 

            gsap.from(".sec_tit3", {
                  scrollTrigger: {
                        trigger: ".sec_tit3",
                        scrub: 1,
                        start: "-100px center",
                        end: "top center",
                        toggleActions: "restart pause reverse pause",
                        markers: true,
                  },
                  opacity: 0,
                  y: 100,
            });





            gsap.from(".f_notice_list", {
                  scrollTrigger: {
                        trigger: ".f_notice_list",
                        scrub: 1,
                        start: "-100px 85%",
                        end: "top 65%",
                        toggleActions: "restart pause reverse pause",

                        markers: true,
                  },
                  opacity: 0,
                  y: 200,
            });

[GSAP Helper 89 Likes (Contributor)]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Based on your description, it sounds like you must be loading content in dynamically after the window's "load" event fires.  ScrollTrigger.refresh() is what calculates all the start/end positions, so it must run AFTER your layout is settled (no more shifting around). It automatically gets called on DOMContentLoaded and load events, but if you've got stuff shifting the layout around after that, you should call ScrollTrigger.refresh() manually when everything is settled.