Bootstrap Tour and Animation

Question

Can I apply this CSS Animation into Bootstrap Tour by using the callback

function onShow:function (tour) { 
    // before show next step, addClass animate into the Bootstrap popover
}

I worked on it and its working. Thanks you. – chamssoudine bacar May 30 '15 at 06:17 — chamssoudine bacar, May 30 '15 at 06:17
You need something like loading spinner ? – Mo. Jan 07 '16 at 22:01 — Mo., Jan 07 '16 at 22:01

score 1 · Answer 1 · answered Mar 16 '18 at 09:03

I know that this question is a little bit older, but you still have no option to add other animations.

I've created a little workaround to integrate every animation from Animate.css into your Bootstrap Tour:

Just use the onHide and onShow functions in the tour configuration.

onHide: function(tour){
    $(".tour-"+tour_name).addClass('animated fadeOutRight');
},
onShown: function(tour){
    $(".tour-"+tour_name).css("opacity","0");
    setTimeout(function(){ //To be sure that it is on the right place
        $(".tour-"+tour_name).css("opacity","1");
        $(".tour-"+tour_name).addClass('animated fadeInLeft');
    }, 320); //Increase here the number if the positions are wrong
},

Also important is that you set for every step the animation to false.

{
    element: "#bst_element",
    title: "Foo title",
    content:"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
    placement:"left",
    backdrop: false,
    animation: false //<-- Set to false
}

I hope that this question might help other users as well.

Bootstrap Tour and Animation

1 Answers1