omeh

Can Gsap .innerHTML be JSX?

I will update it shortly, thanks

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.

ok thanks a lot. You have really helped a lot

Please wanted to ask. I it possible to manipulate an SVG path in gsap. Like a single straight path to be animated as a wave by adjusting its points.

Thanks a lot. I am new here. newbie mistakes

please I need too know why my animation is not smooth const boxType = document.querySelectorAll('.animated-element'); boxType.forEach((box, i) => { gsap.fromTo( box, { scrollTrigger: { trigger: box, start: 'bottom -100%', end: 'bottom 50%', scrub: true, markers: false, }, y: -20, transformOrigin: 'top', ease: 'power4.out', opacity: 0.3, stagger: 0.1, // Adjusted stagger value duration: 0.5, // Adjusted duration }, { scrollTrigger: { trigger: box, start: 'top 30%', end: 'bottom 50%', scrub: true, markers: false, }, ease: 'power4.out', y: 0, transformOrigin: 'top', opacity: 1, stagger: 0.1, // Adjusted stagger value } ); }); <ul class="mt-4 flex flex-col"> <li class="hover:-translate-y-2 ease-in duration-300 animated-element mt-8 inline-flex items-center " > <span class="inline-flex items-center gap-4" > <span class="" ><svg class="w-6" viewBox="0 0 23 5" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M2 2.5H21" stroke="black" stroke-width="4" stroke-linecap="round" /> </svg> </span> </span><span class="text-md inline-flex ml-4" >Engage your global audiences</span > </li> <li class="hover:-translate-y-2 ease-in duration-300 animated-element mt-8 inline-flex items-center " > <span class="inline-flex items-center gap-4" > <span class="" ><svg class="w-6" viewBox="0 0 23 5" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M2 2.5H21" stroke="black" stroke-width="4" stroke-linecap="round" /> </svg> </span> </span><span class="text-md inline-flex ml-4" >Establish your brand</span > </li> <li class="hover:-translate-y-2 ease-in duration-300 animated-element mt-8 inline-flex items-center " > <span class="inline-flex items-center gap-4" > <span class="" ><svg class="w-6" viewBox="0 0 23 5" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M2 2.5H21" stroke="black" stroke-width="4" stroke-linecap="round" /> </svg> </span> </span><span class="text-md inline-flex ml-4" >Achieve your corporate purpose goals</span > </li> <li class="hover:-translate-y-2 ease-in duration-300 animated-element mt-8 inline-flex items-center " > <span class="inline-flex items-center gap-4" > <span class="" ><svg class="w-6" viewBox="0 0 23 5" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M2 2.5H21" stroke="black" stroke-width="4" stroke-linecap="round" /> </svg> </span> </span><span class="text-md inline-flex ml-4" >Connect with your employees</span > </li> <li class="hover:-translate-y-2 ease-in duration-300 animated-element mt-8 inline-flex items-center " > <span class="inline-flex items-center gap-4" > <span class="" ><svg class="w-6" viewBox="0 0 23 5" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M2 2.5H21" stroke="black" stroke-width="4" stroke-linecap="round" /> </svg> </span> </span><span class="text-md inline-flex ml-4" >Inform and influence your stakeholders</span > </li> </ul>