Linking Bootsrap 4 carousel with TimelineLite

[alexut]

Hi,

 

This should be obvious for an experienced user,  I'm trying to create a "link" between the timeline i created and a bootstrap 4 slider, but the timeline dosen't work the way i expect. 

 

So first i created the bootstrap carousel slides, than out of the carousel slides I created 3 divs, class .step0 to step2 with images in them. I did this because I want the step images to be independent from the carousel, but still be targeted by the slide change.

 

I have successfully been able to retrieve the carousel active slides on slide change. The only part that i'm missing is a way to target the flags. .play(flag) - dosen't work the way i expected.

 

Here's the full code :  

    var tlsteps= new TimelineLite({paused:true});
    tlsteps.add("step0") // add step1 label
    .from(".step0",0.4,{autoAlpha:0,right:-200})
    .addPause()
    .add("step1", "+=0.00001")
    .from(".step1",0.4,{autoAlpha:0,right:-200})
    .addPause() 
    .add("step2", "+=0.00001") 
    .from(".step2",0.4,{autoAlpha:0,right:-200})
    .addPause();

    $('#mycarousel').on('slide.bs.carousel', function (event)  {
      var active = $(event.target).find('.carousel-inner > .carousel-item.active');
      var from = active.index();
      var next = $(event.relatedTarget);
      var to = next.index();
      var direction = event.direction;
      var slidestep = 'slide' + from;
      tlsteps.play(slidestep);
  })

See the Pen KareEw by alexut (@alexut) on CodePen

[Dipscom]

Hi alexut,

 

Welcome to the forums!

 

I'm struggling a bit to wrap my head around what it is that you're trying to accomplish. I see bootstrap moving the slides around, that you have a timeline triggering when there's an active class but can't understand what else you are trying to trigger.

 

I'd say it's not a wise move to try and trigger JS based on CSS changes... I, personally would trigger the carrousel using JS, that would give me better hooks to trigger other events with it.

[alexut]

Hi Dipscom, thank you very much for replying to me, maybe I try to do too much when only knowing some basics. Sadly Bootstrap 3/4 has no other way to target the slide number in a js mode, however, this should not be a concern at that part of the code is working ( not perfectly, but i will focus on that later ). 

 

What I lack right now is a way to link carousle item changes with timeline slide animations. I will try telling you more what i want to achieve rather than talk on the code.

 

 

There are around 6 timeline animations.

 

1) slide 1 image in.

2) slide 1 image out.

3) slide 2 image in.

4) slide 2 image out

5) slide 3 image in

6) slide 3 image out

 

When i press the carousel indicators the slide image curently in should leave and the slide that is related to the indicator i pressed should enter the scene.

 

That's why i use this function for: tlsteps.play(slidestep) , trying to target a certain flag, but it's not working that way, and even if it would, not sure if it will create what i want to achieve . 

 

Hope this helps you understand my issue better.

[PointC]

Hi alexut 

 

Welcome to the GreenSock forum.

 

I don't know much about Bootstrap, but we had a pretty lengthy thread about Bootstrap carousels that may be helpful.

 

https://greensock.com/forums/topic/13303-slides-animation-for-bootstrap-carousel/

 

Happy tweening.

[alexut]

After watching some more gsap videos, it became clear i can't play flags ( wonder why ), i changed the code and tried to play timelines instead and everything was ok. All i need to do now is create some amazing animations. 

 

If you have any idea on how to improve this code feedback is welcome.

 

    if ( to == 0 ) {
      tlstep0.play();
    } else if ( to == 1 ) {
      tlstep1.play();
    } else if ( to == 2 ) {
      tlstep2.play();
    } else if ( to == 3 ) {
      tlstep3.play();
    }


    if ( from == 0 ) {
      tlstep0.reverse();
    } else if ( from == 1 ) {
      tlstep1.reverse();
    } else if ( from == 2 ) {
      tlstep2.reverse();
    } else if ( from == 3 ) {
      tlstep3.reverse();
    }

[Dipscom]

Hi alexut,

 

I know this is not what you are after, I'm happy that you have found a way to make it work yourself. But, I have very little experience with Bootstrap not sure how things are being triggered. All I know is that I would set a carrousel up and control it all with JS rather than mixing JS and CSS or triggering Javascript from a change in the CSS styling.

 

Having said that, I did try to make something work. It doesn't but I thought you might appreciate seeing a different way of setting your timeline up.

 

See the Pen apMyLG?editors=0010 by dipscom (@dipscom) on CodePen