[React best practice in terms of browser performance]

Hey guys,

 

I have a question according to GSAP Scolltrigger and React.

It's my first Next.js/React project so I need some advice according to general best practice.

I have quiet a few different components and want to animate in elements when they are in viewport.

Is it better - in terms of browser performance - to query selector all elements based on e.g. a css class in a useEffect hook at my root component or do all logic in every component itself with a ref for example?

I hope this question is not too much out of topic and somebody more experienced can give advice :).

 

Thanks a lot!

[Scrub not working in React]

I have implemented a horizontal scroll for my React App (next.js). 

Works all fine, but the scroll is not catching smooth of with scrub, instead it is instand like a "normal" scroll.

This is the crucial part of my app, where the scroll happens:

 

  const scrollTriggerRef = useRef(null);
  useLayoutEffect(() => {
    if (!horizontalScroll) return;

    let ctx = gsap.context(() => {
      gsap.registerPlugin(ScrollTrigger);
      const scrollTimeline = gsap.timeline({
        scrollTrigger: {
          trigger: scrollTriggerRef.current,
          start: "top top",
          end: "+=9000px",
          scrub: 2,
        },
      });
      scrollTimeline.to(scrollContainerRef.current, {
        x: -scrollContainerRef.current.scrollWidth,
      });
    }, scrollTriggerRef);
    return () => ctx.revert();
  }, []);

If nobody knows the answer right on point, I will provide a minimum demo :).

Thanks guys!

[Scrolltrigger animations after user zooms page]

Hey,

 

my scrolltrigger and animations are not working correctly after the user zooms on desktop and mobile. Is there something like a "trick" I ca do or do I have to kill them all after page zoom?

 

Thanks a lot

[Scrolltrigger image sequence changes frames without scroll interaction]

Hey,

 

I have a little problem with my on scroll image sequence. I am quite sure it has nothing to do directly with Scrolltrigger, but maybe someone had an issue like this in the past and can give me a hint.

The image sequence works perfectly on desktop, but there is an issue at iPad and iPhone. At first the sequence works well also but if you stop scrolling (and I mean really stop, so the scrollbar is absolutely still) - sometimes the sequence jumps back like 45 frames after a while.

Has somebody ever seen something like this?

Thank you guys!