SGRMHDK51

Hey Zach, Apologies for delay in response.. I fiddled around with the proxy to get desire effect but was not able to do so, after a thought I realised that main issue i was tying to address was to speed up scroll, so I added the code to increase the scroll speed and synced up a the text to previous image and placed trigger on the same, to get the effect. Just adding code-sandbox here for future reference,somebody may find this helpful. Would work on "Proxy" to use the drag-able.. https://o753c.csb.app/ Note: Please open link in mobile view

Hi Zach, If ou do not mind can you help me undestand how do I caculate it..

Hi Zach, Please refer to the first component in the below link, If we swipe/drag the image next image is loaded viewport. Just below the Hello./ https://dry-wave-69717.herokuapp.com/gallery You will have to access the link on mobile as it is only optimized for mobile screen, sorry for the inconvience. I am trying to create same effect with GSAP additionally trigger and additionally trigger the scale animation on scroll. Is that possible?

Hi All, I am trying to create a Horizontal scroll component with React JS. So far I have created the component, my goal is to use the drag able to slide in the next component i.e image to viewport. Request guidance on how do I proceed with this. Referred the questions asked on the forum but not able get my head around the concept. Please help, Thanks in advance.. Note : Please inspect the code for Mobile view as Page is supposed to be mobile responsive Kindly find below the Codesandbox link, https://codesandbox.io/s/amazing-mestorf-o753c

@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} />

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 : 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!!!

@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 : 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.

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 ..

Hey @ZachSaucier : Thank you for your inputs. Will surely go through article and migrate project to gsap 3

Sorry guys I am not able to add the question text in the editor. My query is I am passing a ref to a react component, but I am not able to animate the component. I am new to GSAP, I would like to get some feedback or suggestions on the issue.. Thank you for great library.

import React, { Fragment, useState, useEffect, useRef, useContext } from 'react'; import FormHeadings from 'components/Singularity/ApplicationView/FormHeadings'; import addProductContext from 'components/Singularity/OwnerView/WebsiteContentManagement/AddProduct/State/addProductContext.js'; import Sleepy from 'components/Singularity/ApplicationView/WaitingIcons/Sleepy'; import 'components/Singularity/OwnerView/WebsiteContentManagement/AddProduct/styles/index.css'; import ScrollAnimation from 'react-animate-on-scroll'; import { TweenMax, Power2, Bounce, Sine, Elastic, Power3 } from 'gsap'; function AddProduct() { const scrollRef = useRef(null); let headingRef = useRef(); useEffect(() => { TweenMax.to(headingRef.current, 0.2, { x: -200, ease: Power2.easeOut, autoAlpha: 0 }); TweenMax.to(headingRef.current, 1.22, { x: 0, ease: Power3.easeOut, autoAlpha: 1 }); return () => {}; }, []); return ( <> <Background /> <FormHeadings ref={headingRef} heading="Add Product To Menu" /> </> ); } export default AddProduct; FormHeadings component: import React, { useRef, useEffect } from 'react'; import Logo from 'components/Singularity/ApplicationView/Logo'; import { LeftAlignedRowContainer, CenterAlignedColumnContainer } from 'styles/Singularity/Style1.0/ContainerStyles'; import { FormHeadingText } from 'styles/Singularity/Style1.0/TextStyles'; import { FullWidthDivider } from 'styles/Singularity/Style1.0/PageDividerStyles'; const FormHeadings = props => { return ( <> <CenterAlignedColumnContainer> <LeftAlignedRowContainer> <Logo /> <FormHeadingText>{props.heading}</FormHeadingText> </LeftAlignedRowContainer> <FullWidthDivider /> </CenterAlignedColumnContainer> </> ); }; export default FormHeadings;