Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
MrGhie

Overriding Bootstrap Carousel With TweenlineLite

Recommended Posts

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

Link to comment
Share on other sites

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! 

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×