Horizontal scroll with scroll trigger on React JS

[SGRMHDK51]

Hi I am trying to create Horizontal scroll component with React JS.

 

So far I have managed to get the Images scrolling horizontally, and have tried putting in scrolltrigger to animate the Images as they enter the viewport,

 

I am not able to set the "Start" position of trigger , which allow me to achieve the effect.

 

Effect : Remove blur of the image i.e from 2px to 0px once the image comes into view port from right.

Slider Component:     

<MainContainer>
        <SliderContainer>
          {PiattoImages.map((product, index) => {
            return (
              <>
                {' '}
                <img
                  ref={addToRefs}
                  key={index}
                  style={{
                    width: '280px',
                    height: '200px',
                    borderRadius: '25px',
                    aspectRatio: '16:9',
                    imageRendering: 'crisp-edges',
                    padding: '10px'
                  }}
                  src={product.productImageURL}
                />
              </>
            );
          })}
        </SliderContainer>
      </MainContainer>

UseEffect to run the scrolltrigger :

  useEffect(() => {
    imageRefs.current.forEach((el, index) => {
      gsap.fromTo(
        el,
        {
          filter: 'blur(2px)'
        },
        {
          duration: 1.2,
          ease: 'power2',
          filter: 'blur(0px)',
          scale: 1.2,
          scrollTrigger: {
            id: `section-${index + 1}`,
            trigger: el,
            start: 'left',
            toggleActions: 'play none none none',
            horizontal: true
          }
        }
      );
    });
  }, []);

Styled components:

export const SliderContainer = styled.div`
  display: flex;
  flex: row;
  justify-content: flex-start;
  flex-wrap: nowrap;
  width: 375px;
  overflow-x: scroll;
`;

export const MainContainer = styled.div`
  overflow-x: hidden;
  max-width: 100%;
`;

Add to refs function: 

  const addToRefs = el => {
    if (el && !imageRefs.current.includes(el)) {
      imageRefs.current.push(el);
      console.log(imageRefs);
    }
  };

  Please help with the same, Thank you in advance ..

[Ihatetomatoes]

Hi, can you create a Codepen demo? It's hard to help if we don't know what error are you getting.

 

Is the issue in React or GSAP? Codepen demo would help us to help you. Cheers

[SGRMHDK51]

@Ihatetomatoes : First of all I must Thank you for the tutorial..Helped me a lot in getting my head around it..Creating a sandbox for reference.

 

[SGRMHDK51]

@Ihatetomatoes and others Apologies for creating the one while posting.

 

https://codesandbox.io/s/loving-waterfall-2ceus

 

Please test the same using inspect for iphone..

 

Objective is to be able to scroll and swipe, And as the element enters the viewport from right it should be faded in..Currrently I am not able to set the trigger and start to get the desired effect.

 

Hope I am able to summarize the issue.

 

 

[Ihatetomatoes]

Not sure if this is the effect you are trying to create but the horizontal scrolling and triggering is working for me.

 

https://codesandbox.io/s/infallible-black-7prsh

 

By default ScrollTrigger uses the viewport as the scroller (the element that has the scrollbar). In your case I had to add .scroller class to your SliderContainer and add it to the scrollTrigger config.

 

scrollTrigger: {
    id: `section-${index + 1}`,
    scroller: ".scroller",
    trigger: el,
    start: "left",
    toggleActions: "play none none none",
    horizontal: true
}

Sorry I can't view this on a phone right now. Hope it helps.

[Ihatetomatoes]

I think there is an issue on the first load because you are not preloading the images. That means that they have no width when ScrollTrigger is initiated.

[SGRMHDK51]

@Ihatetomatoes : Thanks a lot for the help! I am playing around with the values a little to get the desired effecct.

 

But the solution works!!!

 

Here is the Sandbox link with closer to desired animation

 

https://codesandbox.io/s/nifty-silence-519v4?file=/src/App.js

 

CHeers!!!

[SGRMHDK51]

2 minutes ago, Ihatetomatoes said:

I think there is an issue on the first load because you are not preloading the images. That means that they have no width when ScrollTrigger is initiated.

How shall I go about it, any article or video I can refer to I have just started learning the React and few days back  GSAP .. Its fun!

[Ihatetomatoes]

I don't have any resource that I could direct you to. But I am sure there are some npm packages tackling lazy loading or preloading images.

 

From a GSAP perspective your ScrollTrigger demo works as expected.

[Ihatetomatoes]

Given that you have your container with a fixed height, you can give your images a fixed width to get around it.

[SGRMHDK51]

@Ihatetomatoes : I have put is as inline styles..

<img

ref={addToRefs}

alt="image"

key={index}

style={{

width: "280px",

height: "200px",

borderRadius: "25px",

aspectRatio: "16:9",

imageRendering: "crisp-edges",

padding: "10px"

}}

src={product.productImageURL}

/>