SGRMHDK51 Posted July 29, 2020 Share Posted July 29, 2020 (edited) 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; Edited July 29, 2020 by SGRMHDK51 Not able to see the question text added before the code Link to comment Share on other sites More sharing options...
SGRMHDK51 Posted July 29, 2020 Author Share Posted July 29, 2020 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 29, 2020 Share Posted July 29, 2020 Hey SGRMHDK51 and welcome to the forums. First off, you don't need all of those imports. Just import gsap and use the GSAP 3 syntax: As for your question, I highly recommend you read this React + GreenSock tutorial by @Ihatetomatoes: https://ihatetomatoes.net/react-and-greensock-tutorial-for-beginners/ It explains how to use your refs with GSAP 1 Link to comment Share on other sites More sharing options...
SGRMHDK51 Posted July 29, 2020 Author Share Posted July 29, 2020 Hey @ZachSaucier : Thank you for your inputs. Will surely go through article and migrate project to gsap 3 Link to comment Share on other sites More sharing options...
Rodrigo Posted July 29, 2020 Share Posted July 29, 2020 Hi, The problem I see in the code you posted is that you're using the ref in a React component, not a DOM node, therefore the object you're getting back from it is a React Component. The best alternative is to forward the ref from the child component as shown in this sample: https://codesandbox.io/s/react-hover-forward-ref-ybtgs Finally, even though there are other alternatives to pass a reference from a child component, they are a bit more convoluted and prone to bugs, so if possible stick with forwardRef(). Happy Tweening!!! 2 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