Landing page infinite animation

[Amesh Suthar]

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 

[Rodrigo]

Hi @Amesh Suthar and welcome to the GreenSock forums!

 

Is really hard for us to do much without a simple minimal demo that clearly illustrates the problem (for future threads, always include a minimal demo so we can tinker with your code and help you in a faster way).

 

In this case the issue seems to be related to that final-to-first transition, right? Lucky for us @Carl created an excellent video tutorial, blog post and demo about achieving this with staggers:

 

Here you can find the blog post and demo:

https://www.snorkl.tv/greensock-staggers-with-seamless-loops/

 

Hopefully this helps.

Happy Tweening!

[Amesh Suthar]

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