SGRMHDK51 Posted August 4, 2020 Share Posted August 4, 2020 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 .. Link to comment Share on other sites More sharing options...
Ihatetomatoes Posted August 4, 2020 Share Posted August 4, 2020 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 2 Link to comment Share on other sites More sharing options...
SGRMHDK51 Posted August 4, 2020 Author Share Posted August 4, 2020 @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. Link to comment Share on other sites More sharing options...
SGRMHDK51 Posted August 4, 2020 Author Share Posted August 4, 2020 @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. Link to comment Share on other sites More sharing options...
Ihatetomatoes Posted August 4, 2020 Share Posted August 4, 2020 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. 3 Link to comment Share on other sites More sharing options...
Ihatetomatoes Posted August 4, 2020 Share Posted August 4, 2020 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. Link to comment Share on other sites More sharing options...
SGRMHDK51 Posted August 4, 2020 Author Share Posted August 4, 2020 @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!!! 1 Link to comment Share on other sites More sharing options...
SGRMHDK51 Posted August 4, 2020 Author Share Posted August 4, 2020 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! Link to comment Share on other sites More sharing options...
Ihatetomatoes Posted August 4, 2020 Share Posted August 4, 2020 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. 1 Link to comment Share on other sites More sharing options...
Ihatetomatoes Posted August 4, 2020 Share Posted August 4, 2020 Given that you have your container with a fixed height, you can give your images a fixed width to get around it. 1 Link to comment Share on other sites More sharing options...
SGRMHDK51 Posted August 4, 2020 Author Share Posted August 4, 2020 @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} /> 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now