[ScrollTrigger - pinning left section adds space on bottom]

9 hours ago, OSUblake said:

Refresh after an image loads. Images have a load event listener.

@OSUblake thanks, I have fixed it like this:

 

//! ScrollTrigger fix for react - the calculations were off because images resize the container
  useEffect(() => {
    ScrollTrigger.refresh(true); //! call it once to be sure everything is calculated

    const foundImages = document.querySelectorAll('img');
    if (!foundImages) return () => null;

    const interval = setInterval(() => {
      const areImagesLoaded = Array.from(foundImages).every(
        (image) => image.complete,
      );
      if (areImagesLoaded) {
        ScrollTrigger.refresh();
        clearInterval(interval);
      }
    }, 200);

    return () => {
      if (interval) {
        clearInterval(interval);
      }
    };
  }, []);

 

[ScrollTrigger - pinning left section adds space on bottom]

@Cassie I've found out that refresh() is causing rerender of my react components, so the hover animations are blinking 😕 
Is there a way to fix that?

[ScrollTrigger - pinning left section adds space on bottom]

@Cassie Thanks for your suggestion, but it didn't change anything. 

Could you tell me if the refresh() function can lead to performance issues?

Of course we can try some other possible solutions 

I really appreciate your help even without a demo!
I love this forum  

[ScrollTrigger - pinning left section adds space on bottom]

@GreenSock Yeah, but the problem is that this are normal <img /> elements and they aren't Lazy loaded.
 

10 hours ago, GreenSock said:

ScrollTrigger automatically does a refresh() after the page loads

React pages render after the page loads. So with normal JS you can't tell if the DOM is rendered already. That's the functionality of useEffect().

I think I have an edge case and it cannot be resolved without changing the layout.

I'd like to know if refresh() in an interval can cause performance issues if there are only 2 scroll triggers on a page? If not I will leave it like that

[ScrollTrigger - pinning left section adds space on bottom]

Hi @Cassie, there is a pretty complicated setup that I'm using. I can't provide you with a demo at the moment
 
Maybe you can just guess some solutions and I will try them out?

I'll try to provide you a demo ASAP, but I need to work on the project because of a deadline and I don't want to drop gsap just because of that issue.

I really appreciate your help!
Thanks for your feedback.

I use the gsap functions inside the useEffect hook, so the DOM is 100% rendered.
I think that the images are messing with the gsap calculations. Without any images, everything is fine.

For a temporary solution, I have made a setInterval that goes every 1s for 10 times.
The setInterval function then calls ScrollTrigger.refresh()

[ScrollTrigger - pinning left section adds space on bottom]

Hi, my pinned left section is adding space on bottom. 
It's only if I start scrolling before the page still loads.

I'm using react, so the DOM is rendered before I use GSAP. 

I think the issue here is that there are <img /> elements that change the height after they are loaded.
 

 const animation = gsap.to(container, {
    ease: 'none',
    scrollTrigger: {
      trigger: container,
      start: 'top top',
      end: 'bottom bottom',
      pin: '#sustainability-left-section',
      pinSpacing: false,
      invalidateOnRefresh: true,
    },
  });

invalidateOnRefresh didn't help.

container is a div with grid columns 50% 50%. I'm pinning the left div which has 100vh set.

Any ideas? 

[ScrollTrigger - Horizontal Scrolling]

Thanks!!!! @OSUblake

[ScrollTrigger - Horizontal Scrolling]

@OSUblake yes, I had to change the Layout. Flex was messing with everything.

My horizontal scroll is a bit laggy... Are there any options to make the animation crisp?  


 

const initializeHorizontalScroll = (): GsapKill => {
  const container = document.getElementById('horizontal-scroll-wrapper');
  const navigation = document.getElementById('main-navigation');

  if (!container) {
    throw new Error('Container cannot be null!');
  }

  const navigationWidth = navigation
    ? navigation.getBoundingClientRect().width
    : 0;
  const xValue =
    container.scrollWidth -
    document.documentElement.clientWidth +
    navigationWidth;

  if (xValue <= 0) {
    throw new Error(
      `Cannot initialize horizontal scroll, because there is nothing to scroll. xValue: ${xValue}`,
    );
  }

  const animation = gsap.to(container, {
    x: () => `${-xValue}px`,
    ease: 'none',
    scrollTrigger: {
      trigger: container,
      invalidateOnRefresh: true,
      start: 'top top',
      pin: true,
      scrub: 0.5,
      end: () => container.offsetWidth,
    },
  });
  return animation.kill;
};

 

[ScrollTrigger - Horizontal Scrolling]

Maybe it helps to find a solution:
I found out that scroller start and scroller end are in the same spot and it's following while scrolling:

[ScrollTrigger - Horizontal Scrolling]

Hi, 
I need some help with horizontal scrolling.
I can't provide you with a CodePen example.

My env.:
Next.js
GSAP (newest version at the moment)

My <body> element contains a <Layout> element which is set like this:

 

.layout {

  display: flex;

  flex-direction: row;

  width: 100vw;

  height: 100vh;

  overflow-y: auto;



  main {

    display: flex;

    flex-direction: column;

    flex-grow: 1;

    overflow-y: auto;

    overflow-x: hidden;

  }

}

Inside <main> I'm trying to implement something simmilar to the codepen 

My version looks like this:

 

export const HorizontalScrollTiles: React.FC = () => {

  useEffect(() => {
    const container = document.querySelector('.abc');
    const scroller = document.getElementById('main');

    gsap.to(container, {
      x: () =>
        `${-(container.scrollWidth - document.documentElement.clientWidth)}px`,
      ease: 'none',
      scrollTrigger: {
        scroller,
        trigger: container,
        invalidateOnRefresh: true,
        pin: true,
        scrub: 1,
        end: () => `+=${container.offsetWidth}`,
      },
    });
  }, []);

  return (
    <div
      className="abc"
      style={{
        minHeight: '100vh',
        display: 'flex',
        flexWrap: 'nowrap',
        width: '600%',
      }}>
      <Tile
        className="horizontal-scroll-tile"
        style={{ width: '100%', backgroundColor: '#ff22ff' }}
      />
      <Tile
        className="horizontal-scroll-tile"
        style={{ width: '100%', backgroundColor: '#ffff2f' }}
      />
      <Tile
        className="horizontal-scroll-tile"
        style={{ width: '100%', backgroundColor: '#f29fff' }}
      />
      <Tile
        className="horizontal-scroll-tile"
        style={{ width: '100%', backgroundColor: '#ff8029' }}
      />
      <Tile
        className="horizontal-scroll-tile"
        style={{ width: '100%', backgroundColor: '#ffff99' }}
      />
      <Tile
        className="horizontal-scroll-tile"
        style={{ width: '100%', backgroundColor: '#11ffff' }}
      />
    </div>
  );
};

Tile Element is just a <div> containing another <div> with a <h2>

I'm going to explain the problem now:

First of all, the code does something only if I set markers: true it's not perfect, but at least I can scroll almost to the end of the last <Tile>
Without markers set to true, I can't scroll at all.

Do you have any ideas/suggestions how to implement this functionality? 
It's really important.

With markers set to true:

 

and without:

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