omeh Posted February 14 Share Posted February 14 I want a smooth transition. MY animation starts by scrolling from a single word to another. Then the inner HTML is replaced and I want the animation to repeat, import MobileProto from '../../assets/images/mobile_proto.svg' import naira from '../../assets/images/naira 1.png'; import usdt from '../../assets/images/tether-usdt-coin.png'; import btc from '../../assets/images/bitcoin 2.png'; import {useRef, useState} from "react"; import WaitingBox from "./WaitingBox.tsx"; // import MobileProtoSVG from "../../assets/images/MobileProtoSVG.tsx"; import {useGSAP} from "@gsap/react"; import {gsap} from "gsap" // import {CloseType, } from "../../types/util.ts"; function Hero() { const [toggle,setToggle] = useState(false); const textRef = useRef(null) const containerRef = useRef(null) useGSAP(()=>{ const tl = gsap.timeline(); tl .to(textRef.current,{ delay:1.5, duration: 2, // Animation duration in seconds ease: "power2.inOut", scrollTop: 500, },">=") .to(containerRef.current, { innerHTML:"<span>Securely enter the future of finance</span>", ease: "power2.out", duration:2, delay:1.5, opacity:1, y:0 }) .repeat(-1) },{scope:containerRef}) function handleClose(): void{ setToggle(false); } return ( <div className={"max-w-6xl mx-auto md:my-36 my-12 text-center md:p-2 p-4"}> <h1 ref={containerRef} className="text-4xl md:text-7xl main-h! text-white font-medium"> Acquire <span ref={textRef} className={"ease-in inline-flex flex-col duration-300 max-h-10 md:max-h-18 overflow-hidden relative no-scrollbar"}> <span className={" w-full h-full scroll-up "}> <span className={"block"}> BOOOK </span> <span className={"block"}> Digital </span> </span> </span> assets Easily </h1> <p className="text-lg max-w-xl mx-auto my-4 text-white">Get amazing rates, discounts and so much more when you exchange your cryptocurrencies and Giftcards.</p> <div className="mt-12"> <button onClick={()=>{ setToggle(true) }} className={"px-14 inter-font py-4 rounded-lg shadow-2xl hover:shadow-lg ease-in duration-300 bg-btnLightBlue border-2 border-white border-b-gray-500 text-xl text-primary" }> <span className={"sh"}> Join wait list </span> </button> </div> <div className=""> <span className={"absolute z-10 left-1 md:left-10 top-[60%] animate-icon"}> <img src={naira} alt="" className={"md:w-56 w-28"}/> </span> <span className={"absolute z-10 right-2 md:right-10 md:top-[70%] animate-icon"}> <img src={usdt} alt="" className={"md:w-48 w-24"}/> </span> <span className={"absolute z-10 top-[80%] animate-icon "}> <img src={btc} alt="" className={"md:w-48 w-24 "}/> </span> </div> <div className="my-12 text-center grid justify-center items-center md:w-[50%] mx-auto "> {/*<MobileProtoSVG className={"block mx-auto"}/>*/} <img src={MobileProto} alt="" className={"w-full"}/> </div> { toggle?<WaitingBox close={handleClose}/>:null } </div> ); } export default Hero; starting from the beginning. It runs the first time but stops and doesn't do the scroll animation again after that. See the Pen zYbyRRg by omeh (@omeh) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted February 14 Share Posted February 14 Hi, The demo you posted is not working. I suggest you to fork one of our starter templates in Stackblitz: https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters Also for animating the scroll position of an element you should use GSAP's ScrollTo Plugin: https://gsap.com/docs/v3/Plugins/ScrollToPlugin Finally I'd strongly recommend you to use state in order to conditionally render the text change. If your component re-renders again for any reason it won't know which text it should have so it'll render the one it finds in the JSX. Once we can see a working demo we'll be able to help you with this. Happy Tweening! Link to comment Share on other sites More sharing options...
omeh Posted February 15 Author Share Posted February 15 I will update it shortly, thanks Link to comment Share on other sites More sharing options...
omeh Posted February 15 Author Share Posted February 15 Can Gsap .innerHTML be JSX? Link to comment Share on other sites More sharing options...
GreenSock Posted February 15 Share Posted February 15 I'm not sure I understand your question, but if you swap out the innerHTML, that will completely wipe out the old element instances and re-create new ones, thus if you have an existing animation that's affecting those elements in the innerHTML, and then you replace the innerHTML, that means the animation will be affecting elements that don't exist in the DOM anymore. You'd have to re-create your animation to target those new elements. Does that answer your question? A minimal demo will go a long way toward getting you a good answer. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now