scrollTrigger

[Gralinas]

Hello, my first post here

 

I just started using GSAP, loving the concept, but I ran into strange problem. I'm using scrollTrigger, with start property, and my "start/end" markers sometimes (every ~5 saves) are changing position when I'm saving SAME code.

I turned off all css, to see if this is css problem, and no, it's not, "start/end" markers changes positions sometimes when i hit save on vscode.

 

HTML ( I deleted the content to see the building blocks):

 <ul class="our-trainers__list animation-ee-trigger">
     <li class="our-trainers__list-item animation-ee"></li>

     <li class="our-trainers__list-item animation-ee"></li>

     <li class="our-trainers__list-item animation-ee"></li>
</ul>

 

JS: 

gsap.fromTo('.animation-ee', { y: 200, opacity: 0} ,

 {

    scrollTrigger: { 

        trigger: ".animation-ee-trigger", 

        toggleActions: "restart none none none",

        // toggleActions: "restart none reverse none",

        start: "-200px center", 

        // end: "-200px center",

        markers: true,

        // scrub: true

    },

    duration: 1, 

    y: 0, 

    opacity: 1, 

    stagger: 0.2, 

   

    ease: "power1"

})

 

Can you help me with it?

[ZachSaucier]

Hey Gralinas and welcome to the GreenSock forums.

 

The positions of the markers is not guaranteed to be correct though usually it is. Is the position of your ScrollTrigger animation itself off? If so then that's an issue that we'd like to investigate. If you could create a minimal demo of the issue it'd help us regardless.

 

Side note: You should stick to .to() and .from() instead of .fromTo() whenever you can. Using .fromTo() creates a very slight amount of overhead that you should avoid if you can