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

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.

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