Jump to content
Search Community

Linking Bootsrap 4 carousel with TimelineLite

alexut test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

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

    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();
    }
Link to comment
Share on other sites

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

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.
×
×
  • Create New...