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 : http://codepen.io/alexut/pen/KareEw
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);
})