React ScrollTrigger Pin Jumps

[dancingrobots]

I have two scrolltrigger based pins in separate React components, WorkContainer.jsx and SkillsWrapper.jsx. Both pieces of pinned content appear to jump positions on enter. The second pin, in SkillsWrapper,  will also jump randomly on page refresh and will appear before or after it's pinned content section.

 

I've tried to remove all padding/margin to the affected sections, added context, and added "anticipatePin" to both scrolltriggers but the issue persists.

 

See useEffect for WorkContainer:

  useEffect(() => {
    let ctx = gsap.context(() => {
      // Pin featured work text
      ScrollTrigger.create({
        trigger: '#featured-work-text',
        start: 'top top',
        end: 'bottom 60px',
        pin: true,
        // markers: true,
        anticipatePin: 1,
      });

      const videos = gsap.utils.toArray('video');

      videos.forEach(function (video) {
        ScrollTrigger.create({
          trigger: video,
          // scroller: ".appVideos",
          start: 'top 65%',
          end: 'bottom 0',
          // markers: true,
          onEnter: () => video.play(),
          onEnterBack: () => video.play(),
          onLeave: () => video.pause(),
          onLeaveBack: () => video.pause(),
        });
      });
    }, component); // <- selector scoping
    return () => ctx.revert();
  }, []);

See useEffect for SkillsWrapper:

useEffect(() => {
    let ctx = gsap.context(() => {
      let mm = gsap.matchMedia();
      mm.add(
        {
          isDesktop: '(max-width: 768px)',
          isMobile: '(min-width: 768px)',
        },
        (context) => {
          // eslint-disable-next-line no-unused-vars
          let isDesktop = context.isDesktop;

          // Sets Scrolltrigger pin for circle
          let tl = gsap.timeline({
            scrollTrigger: {
              trigger: '#circle-container',
              start: 'top top',
              end: '+=100%',
              pin: isDesktop ? false : true,
              pinSpacing: false,
              toggleActions: 'play none none reverse',
              anticipatePin: 1,
              invalidateOnRefresh: true,

              // markers: true,
            },
          });

         // ... additional commented out tl
        }
      );
    }, component); // <- selector scoping
    return () => ctx.revert();
  }, []);

 

Please see attached video showing my issue and stackblitz links to project below:

• Stackblitz project editor
• Stackblitz application preview

 

Any help with resolving this issue would be greatly appreciated.

[Rodrigo]

Hi,

 

I believe that the issue here is not related to GSAP and is related to something in your HTML and CSS.

 

I created this codepen with the basics of your code:

See the Pen oNJNVpo by GreenSock (@GreenSock) on CodePen

 

And you can see the issue at the end. I made the same example in React and the issue persists:

https://stackblitz.com/edit/vitejs-vite-meykxa?file=src%2FApp.jsx,src%2Findex.css&terminal=dev

 

But if I use a simpler HTML/CSS setup there is no extra space:

https://stackblitz.com/edit/vitejs-vite-jsselg?file=src%2FApp.jsx,src%2Findex.css&terminal=dev

 

Unfortunately your example has several hundreds of lines of CSS and a very complex HTML/components structure in your JSX and we don't have the time resources to comb through all that and find the problem you have. You can hire us on a consulting basis or you can post in the Jobs & Freelance forums in order to get help there.

 

Hopefully this helps. Good luck with your project!

Happy Tweening!

[dancingrobots]

Thank you Rodrigo for putting together that codepen and for testing more with React. I was actually able to get my desired pinning effect working without issue by switching to CSS position:sticky instead of pinning with GSAP.

 

Thanks again.