ScrollTrigger start point doesn't match with trigger section

[azadsarxanli 6 Likes (Newbie)]

I used scrollTrigger for three sections, two of them worked totally normal, but when I add scrollTrigger for  another section the start point goes different place (goes to almost top *). I can handle it just by changing the properties of start point, but I'm wondering why this happens. 

code of third section 

 

* photo

https://imgur.com/a/VaunVoo

 

unfortunately, I can't share all codes as public. I can send codes via DM
 

import { useEffect, useRef } from "react";
import trackKuryer from "../assets/images/velokuryer-tracking-iphone.png";
import { gsap, Power3 } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

function Track() {
  gsap.registerPlugin(ScrollTrigger);
  const refTrack = useRef(null);
  useEffect(() => {
    gsap.from(".img-aside", {
      xPercent: -100,
      duration: 1,
      delay: 0.6,
      opacity: 0,
      scrollTrigger: {
        target: refTrack.current,
        markers: true,
      },
    });
  });

  return (
    <section className="tracker" ref={refTrack}>
      <aside className="img-aside">
        <img src={trackKuryer} alt="track-kuryer" />
      </aside>
      <aside className="content-aside">
        <div className="content">
          <h4>Трекер курьера </h4>
          <p>
            Nunc hendrerit cursus molestie interdum nulla nulla. Magna duis quis
            elit, rhoncus amet, eu duis condimentum purus. Eu sit dignissim ut
            ipsum vel scelerisque id ac. Turpis donec dolor vulputate et iaculis
            faucibus. Tempus urna enim maecenas feugiat amet, ultricies sit
            massa. Vestibulum erat.
          </p>
        </div>
      </aside>
    </section>
  );
}

export default Track;

 

[GreenSock 18,240 Likes (Superhero)]

I'm not a React guy, but I think you forgot to add an empty Array to the useEffect(..., []) call so it's calling that on every render (re-creating your tween and ScrollTrigger many times?) 

 

Also, there's a known regression in 3.9.1 that affects .from() calls with ScrollTriggers and it's already fixed in the upcoming release but you can work around it by setting lazy: false on the from() tween(s). 

 

If you still need help, please provide a minimal demo. We don't want to see your whole project - just isolate things in the most basic, bare-bones CodePen or CodeSandbox possible with generic <div> elements (you don't need your official images or anything like that). 

[azadsarxanli 6 Likes (Newbie)]

1 hour ago, GreenSock said:

I'm not a React guy, but I think you forgot to add an empty Array to the useEffect(..., []) call so it's calling that on every render (re-creating your tween and ScrollTrigger many times?) 

 

Also, there's a known regression in 3.9.1 that affects .from() calls with ScrollTriggers and it's already fixed in the upcoming release but you can work around it by setting lazy: false on the from() tween(s). 

 

If you still need help, please provide a minimal demo. We don't want to see your whole project - just isolate things in the most basic, bare-bones CodePen or CodeSandbox possible with generic <div> elements (you don't need your official images or anything like that). 

Ah thanks to you! But I used "target", instead of "trigger". It seems I need to rest...

[GreenSock 18,240 Likes (Superhero)]

1 hour ago, azadsarxanli said:

Ah thanks to you! But I used "target", instead of "trigger". It seems I need to rest...

Doh! I missed that too. Good catch.