Overriding Bootstrap Carousel With TweenlineLite

[MrGhie]

I still learning how to use Greensock, even i was a newbie with js or Jquery. But when i see what GSAP can do,  i wanna learn it.

 

I doing practice with bootstrap 4 carousel, but for the loops, i have to overide all. I not understand, how to overide just for the animation inside the ".carousel-caption".

 

This one is the hardest one Y_Y

 

/*RUN TIMELINE WHEN EACH OF THE SLIDES IS LOADED*/
    $carousel.on("slid.bs.carousel", function (e) {
        TweenLite.to($carouselCaption, 0.1, {
            opacity: 1
        });
        var slideId = e.relatedTarget.id;
        if (slideId === "1") {
            pertamaTl.restart();
            keduaTl.pause();
            ketigaTl.pause();
        } else if (slideId === "2") {
            if (counter === 0) {
                keduaTl = keduaTimeline();
            } else {
                keduaTl.restart();
            }
            counter++;
        };
        if (slideId === "2") {
          pertamaTl.pause();
          keduaTl.restart();
          ketigaTl.pause();
        } else if (slideId === "3") {
            if (counter === 1) {
                ketigaTl = ketigaTimeline();
            } else {
              ketigaTl.restart();
            }
            counter++;
        };
        if (slideId === "3") {
          pertamaTl.pause();
          keduaTl.pause();
          ketigaTl.restart();
        } else if (slideId === "1") {
            if (counter === 1) {
              pertamaTl = pertamaTimeline();
            } else {
              pertamaTl.restart();
            }
            counter++;
        };
    });

Anyone can teach me, how to convert it / or writing , adapted to the gsap coding rules...?

 

One thing, can anyone teach me how to create Progress bar, or animate that red line below the title, thanks

 

Best Regards Mugi

 

Sorry for my Bad Grammar

See the Pen QRaEpO by Mugianto (@Mugianto) on CodePen

[ZachSaucier]

Hi MrGhie and welcome to the forum.

 

It seems like your post is a general request for converting this carousel to using GSAP. This forum is not intended for people to do the whole conversion for you, but if you have a specific question, such as how to animate the a red line in a certain way, please ask! 

[MrGhie]

On 5/23/2019 at 4:43 AM, ZachSaucier said:

Hi MrGhie and welcome to the forum.

 

It seems like your post is a general request for converting this carousel to using GSAP. This forum is not intended for people to do the whole conversion for you, but if you have a specific question, such as how to animate the a red line in a certain way, please ask! 

Sorry for my late reply. Yeah i for the red line to. I can manage to animate it just for the first slider, but the rest of slider i fail. Y_Y, so i delete the animation

 

Btw thanks for fast respon