I want my text animation to be smooth, but it is janky.

[omeh]

 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

[Rodrigo]

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!

[omeh]

I will update it shortly, thanks 

[omeh]

Can Gsap .innerHTML be JSX?

[GreenSock]

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.