Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Kushal

CSSRulePlugin is not working when used with scroll trigger

Recommended Posts

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
Link to comment
Share on other sites

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"
})

 

  • 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.
×