Amesh Suthar

i want to make animate like this but i don't know how ?https://in.pinterest.com/pin/201887995780367513/. is it possible with gsap if yes then how to animate multiple section at the same time, repeat infinite

i want to do like this in react , i have created but when i'm using in react it's become lake, like hang at a place is gsap code with react working smoothly or not ? i want to create like this but i don't know how to do anybody please support me, is it possible with gsap or using other library in react https://dribbble.com/shots/3990671-Picless-Interaction like animation please check this link

I'm created it but stuck in run infinite, when repeat animation is not working properly my animation like this https://dribbble.com/shots/3990671-Picless-Interaction i'm adding 4 text headings working properly but when animation repeat then my second & third animation working together and text over lap to each other my html code is :: <section class="landing-pg"> <div class="landing-left"> <div class="verticaltext"> <div class="event event-name1"> <h1 class="heading62 hea">Haldi</h1> <h1 class="heading62 hea">Pre-Wedding</h1> <h1 class="heading62 hea">Holi</h1> <h1 class="heading62 hea">party</h1> </div> <div class="event event-name2"> <h1 class="heading62 ms-4">Wedding</h1> <h1 class="heading62 ms-4">Shoot</h1> <h1 class="heading62 ms-4">Festival</h1> <h1 class="heading62 ms-4">Celebration</h1> </div> <div class="event-desc"> <p class="text24">1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <p class="text24">2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <p class="text24">3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <p class="text24">4 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> </div> </div> <div class="event-heading"> <h3 class="heading62">wedding</h3> <h3 class="heading62">shoot</h3> <h3 class="heading62">events</h3> <h3 class="heading62">celebration</h3> </div> <div class="total-images"> <div class="numbers"> <span class="heading92">1</span> <span class="heading92">2</span> <span class="heading92">3</span> <span class="heading92">4</span> </div> <span class="heading92">/</span> <span class="heading92">4</span> </div> <!-- <div class="pre-nxt"> <div class="title24 pre">Pre</div> <div class="title24 middle">|</div> <div class="title24 nxt">Next</div> </div> --> </div> <div class="landing-right pe-0"> <img src="./assets/media/haldiWedding.png" alt="landing slider image" class="img-fluid lr-img"> <img src="./assets/media/preweddShoot.jpg" alt="landing slider image" class="img-fluid lr-img"> <img src="./assets/media/festival.png" alt="landing slider image" class="img-fluid lr-img"> <img src="./assets/media/party.png" alt="landing slider image" class="img-fluid lr-img"> </div> <!-- <div class="item"> </div> --> </section> css code :: .landing-pg { display: flex; justify-content: space-between; align-items: end; margin-top: -150px; position: relative; } .landing-pg .event-heading { display: flex; overflow: hidden; position: relative; height: 60px; } .landing-pg .event-heading h3 { opacity: 0.15; color: #C7A976 !important; line-height: 1; margin: 0; position: absolute; top: 0; left: 100%; } .landing-pg .landing-left { width: 24vw; } .landing-pg .landing-right { width: 74vw; height: 100vh; position: relative; z-index: 0; } .landing-pg .landing-right img { position: absolute; opacity: 0; height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .landing-pg .total-images { position: absolute; top: 150px; left: 21vw; z-index: 1; width: 180px; text-align: end; display: flex; } .landing-pg .total-images .numbers { display: flex; overflow: hidden; width: 62px; height: 120px; color: #2f2f2f !important; position: relative; } .landing-pg .total-images .numbers span { position: absolute; left: 100%; } .landing-pg .total-images:not(.numbers span) { color: #C7A976 !important; } .landing-pg .pre-nxt { position: absolute; left: 22vw; bottom: 1.5625vw; width: 8.8541666667vw; z-index: 1; } .landing-pg .pre-nxt .pre { width: -moz-fit-content; width: fit-content; cursor: pointer; } .landing-pg .pre-nxt .middle { width: -moz-fit-content; width: fit-content; background-color: #C7A976 !important; color: #C7A976 !important; border: 10px solid #C7A976 !important; padding: 0; margin: -28px 10px -26px 64px; } .landing-pg .pre-nxt .nxt { width: -moz-fit-content; width: fit-content; margin-left: auto; cursor: pointer; } .verticaltext { writing-mode: vertical-rl; transform: scale(-1); height: 26.0416666667vw; margin: auto; margin-bottom: 10.4166666667vw; } .verticaltext .event { width: 80px; overflow: hidden; position: relative; } .verticaltext .event h1 { position: absolute; right: 100%; margin: 0px; } .verticaltext .event-desc { width: 140px; overflow: hidden; margin: 0px 18px 0px 0px; position: relative; } .verticaltext .event-desc p { position: absolute; right: 200px; } my gsap code code is :: gsap.to(".landing-right img", { ease: Expo.easeInOut, opacity: 1, duration: 1.5, stagger: 6, repeat: -1, }); // begin :: heading name 1 gsap.to(".event-name1 h1", { right: "0%", duration: 1.5, stagger: 6, repeat: -1, }); gsap.to(".event-name1 h1", { delay: 6, right: "-100%", duration: 1.5, stagger: 6, repeat: -1, }); // end :: heading name 1 // begin :: heading name 2 gsap.to(".event-name2 h1", { right: "0%", duration: 1.5, stagger: 6, repeat: -1, }); gsap.to(".event-name2 h1", { delay: 6, right: "-100%", duration: 1.5, stagger: 6, repeat: -1, }); // end :: heading name 2 // begin :: event-desc p gsap.to(".event-desc p", { right: "0%", duration: 1.5, stagger: 6, repeat: -1, }); gsap.to(".event-desc p", { delay: 6, right: "-100%", duration: 1.5, stagger: 6, repeat: -1, }); // end :: event-desc p // begin :: event-heading h3 gsap.to(".event-heading h3", { left: "0%", duration: 1.5, stagger: 6, repeat: -1, }); gsap.to(".event-heading h3", { delay: 6, left: "-100%", duration: 1.5, stagger: 6, repeat: -1, }); // end :: event-heading h3 // begin :: numbers gsap.to(".numbers span", { left: "0%", duration: 1.5, stagger: 6, repeat: -1, }); gsap.to(".numbers span", { delay: 6, left: "-100%", duration: 1.5, stagger: 6, repeat: -1, }); // end :: numbers please help to solve this problem also when i implement in react then this section is hang for 1,2 seconds please help to improve my code