CSSRulePlugin is not working when used with scroll trigger

[Kushal 0 Likes (Newbie)]

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

[_Greg _ 128 Likes (Specialist)]

Hi!

Please create a minimal demo

Buy the way, ScrollTrigger does not have any property with name target, cssRule plugin was deprecated and autoAlpha or scaleX is not css rule.

 

You need something like 

gsap.to(docImgAfter,{
  duration:1.2,
  scrollTrigger:{
    markers:true,
    trigger:docImgAfter,
    start:"top center",
    toggleActions:"restart none none none"
  },
  scaleX:0,
  ease:"Power1.out"
})

gsap.to(docImgBefore,{
  duration:1.2,
  scrollTrigger:{
    trigger:docImgAfter,
    start:"top center",
    toggleActions:"restart none none none"
  },
  x:-60,
  autoAlpha:1,
  ease:"Power1.out"
})