[Linking Bootsrap 4 carousel with TimelineLite]

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();
    }

[Linking Bootsrap 4 carousel with TimelineLite]

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.

[Linking Bootsrap 4 carousel with TimelineLite]

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