Jump to content
Search Community

Not able to animate React styled component

SGRMHDK51 test
Moderator Tag

Recommended Posts

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 by SGRMHDK51
Not able to see the question text added before the code
Link to comment
Share on other sites

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

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

  • Like 1
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...