Jump to content
Search Community

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

Kushal test
Moderator Tag

Recommended Posts

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