Trying to convert multiscreen animation in babel (reactjs)

[dhruvjs]

I was trying to convert this codepen into react but things are not going very good.

 

import { useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import "./split-scroll.less";
import { useGSAP } from "@gsap/react";

gsap.registerPlugin(ScrollTrigger);

const ScrollSections = () => {
  const containerRef = useRef(null);
  const rightSectionRef = useRef(null);

  useGSAP(() => {
    function goToSection(section, st) {
      gsap.to(containerRef.current, {
        scrollTo: {
          y: section.offsetTop,
          autoKill: false,
        },
        overwrite: true,
        duration: 1,
        onUpdate: () => setRightScroll(st.scroll() * 2),
      });
    }

    const setRightScroll = gsap.quickSetter(rightSectionRef.current, "y", "px");
    gsap.utils.toArray(".left-section .box").forEach((section) => {
      ScrollTrigger.create({
        trigger: section,
        onEnter: (self) => goToSection(section, self),
      });

      ScrollTrigger.create({
        trigger: section,
        start: "bottom bottom",
        onEnterBack: (self) => goToSection(section, self),
      });
    });
  });

  return (
    <div className="sections-container" ref={containerRef}>
      <div className="left-section">
        <div className="box box1"></div>
        <div className="box box3"></div>
        <div className="box box5"></div>
      </div>
      <div className="right-section" ref={rightSectionRef}>
        <div className="box box6"></div>
        <div className="box box4"></div>
        <div className="box box2"></div>
      </div>
    </div>
  );
};

export default ScrollSections;

 

See the Pen YzdEzZm by GreenSock (@GreenSock) on CodePen.

[GSAP Helper]

Without a minimal demo that clearly illustrates the issue, it's very difficult to troubleshoot. Can you please provide one? Here's a React starter template you can fork: 

 

https://stackblitz.com/edit/react-cxv92j?file=src%2FApp.js 

 

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

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[dhruvjs]

@GSAP Helper here is link of minimal demo https://stackblitz.com/edit/react-mzhvvadh?file=src%2FSplitScroll.jsx

 

[Rodrigo]

Hi,

 

Basically the error is here:

function goToSection(section, st) {
  gsap.to(containerRef.current, {
    scrollTop: section.offsetTop, // Use scrollTop instead of scrollTo
    overwrite: true,
    duration: 1,
    onUpdate: () => setRightScroll(st.scroll() * 2),
  });
}

You're setting the scrollTop property of the container element, but that container is the same height of the child elements in it and it has overflow hidden. The codepen demo leverages the ScrollTo Plugin which works on the window object. So changing that code to this works as expected:

function goToSection(section, st) {
  gsap.to(window, {
    scrollTo: {
      y: section,
      autoKill: false,
    },
    overwrite: true,
    duration: 1,
    onUpdate: () => setRightScroll(st.scroll() * 2),
  });
}

Here is a fork of your demo:

https://stackblitz.com/edit/react-hrhzctbq?file=src%2FSplitScroll.jsx

 

Hopefully this helps

Happy Tweening!

[dhruvjs]

@Rodrigo Thanks for your help , Usually we include this code with some other components for example header and footer ( there could be much bigger component) in that case our animation misbehaves I have included an example https://stackblitz.com/edit/react-z9jbfnul?file=src%2FSplitScroll.jsx. What could be poossible solutiion for that such that our component works perfectly not depedent upon any other component above or below that.

EDIT: I debugged this issue and updated one line this solves my issue for header and footer . I provided a static value 264px that was creating trouble but that's not universal solution if I add more component to it it might get worse

        onUpdate: () => setRightScroll(st.scroll() * 2 -264),