Kushal

Also, Its going back to its initial x:50

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.

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

import drUrviImg from "../resources/images/dr.urviPanchal.jpeg"; import { LeftTopCornerSvg, RightBottomCornerSvg } from "./svg"; import CSSRulePlugin from "gsap/CSSRulePlugin"; import ScrollTrigger from "gsap/src/ScrollTrigger"; import gsap from "gsap"; import { useEffect, useRef } from "react"; gsap.registerPlugin(CSSRulePlugin,ScrollTrigger); const DoctorsIntro = () =>{ let docImgBefore = CSSRulePlugin.getRule(".doc-intro-container .doc-intro-image::before"); let docImgAfter = CSSRulePlugin.getRule(".doc-intro-container .doc-intro-image::after"); useEffect(()=>{ gsap.to(docImgAfter,{duration:1.2,scrollTrigger:{markers:true,target:docImgAfter,start:"top center",toggleActions:"restart none none none"},cssRule:{scaleX:0},ease:"Power1.out"}) gsap.to(docImgBefore,{duration:1.2,scrollTrigger:{target:docImgAfter,start:"top center",toggleActions:"restart none none none"},cssRule:{left:-60,autoAlpha:1},ease:"Power1.out"}) },[]) return( <> <div className="doc-intro-container"> <div className="doc-intro-image"> <img src={drUrviImg}/> </div> <div className="doc-intro-content-inner"> <div className="doc-intro-content"> <LeftTopCornerSvg componentClassName="doc-intro-left-top-svg"/> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget mattis dolor. Fusce at nisi non risus convallis gravida sit amet in elit. In quis diam est. Phasellus lobortis eget mauris eu dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget mattis dolor. Fusce at nisi non risus convallis gravida sit amet in elit. In quis diam est. Phasellus lobortis eget mauris eu dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget mattis dolor. Fusce at nisi non risus convallis gravida sit amet in elit. In quis diam est. Phasellus lobortis eget mauris eu dictum. </p> <RightBottomCornerSvg componentClassName="doc-intro-right-bottom-svg"/> </div> <div className="doc-intro-name"> <h4></h4> <span>M.B.B.S, M.D, (Skin and V.D)</span> <span>MANAGING DIRECTOR</span> </div> </div> </div> </> ) } export default DoctorsIntro