Kushal
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Kushal
-
-
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
gsap."from" is not working when used with scrolltrigger
in GSAP
Posted
Also, Its going back to its initial x:50