Jump to content
Search Community

ScrollTrigger start point doesn't match with trigger section

azadsarxanli test
Moderator Tag

Recommended Posts

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;

 

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

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.
×
×
  • Create New...