gsap."from" is not working when used with scrolltrigger

[Kushal 0 Likes (Newbie)]

import "./component.scss";

 

import CSSRulePlugin from "gsap/CSSRulePlugin";

import ScrollTrigger from "gsap/src/ScrollTrigger";

import gsap from "gsap";

import { useEffect, useRef } from "react";

 

const Heading = (props) =>{

    let headingContainer = useRef(null);

    gsap.registerPlugin(CSSRulePlugin,ScrollTrigger);

 

    useEffect(()=>{

        gsap.from(

            headingContainer,

            {scrollTrigger:{trigger:headingContainer,start:"top center",toggleActions:"restart none none none"}, duration:1,

            autoAlpha:1,

            y:0,

            ease:"power1.easeOut"

           

        }

        );

    },[])

    return(

        <>

        <div className="heading-container" ref={el=>{headingContainer=el}}>

            <div className="heading-content">

                <h2>{props.content}</h2>

            </div>

            <div className="heading-diamond"></div>

        </div>

        </>

    )

}

 

export default Heading

[_Greg _ 128 Likes (Specialist)]

Hi!

ScrollTrigger is working fine with .from() you can check it

See the Pen 97d51a6681967e078a35f4a9e87954ea?editors=0010 by GreenSock (@GreenSock) on CodePen

Please create a minimal demo  

[Kushal 0 Likes (Newbie)]

When I try to use it, as soon as the it is triggered it goes from x:50 i.e translate(50px,0px) to translate3d(0,50px,0), also autoAlpha:0 doesn't get triggered. I am using react.

[Kushal 0 Likes (Newbie)]

Also, Its going back to its initial x:50

[_Greg _ 128 Likes (Specialist)]

Without a minimal demo very hard to say whats wrong 

If you want create demo with React you can use codesandbox

The presented code is not enough to understand what the problem is

[OSUblake 18,534 Likes (Superhero)]

If you're having trouble, please make a minimal demo. Thanks!