multiple configuration on one page

[seetpal-smartshore]

I am in a big trouble, I had to implement smoothslate on static website, but know I need different script and onstart/onready durations for specific links under content area under specific container (like #main #worked a).

but for all other links I need different configuration/script.

you can see below my code.

unable to use it multiple time. Please provide some solution.

$('#main_container').smoothState({

    anchors: 'a:not("#worked a")', 
    onStart : { 
        duration: 250,

        render: function () {

            console.log('container');
        }
    }
}).data('smoothState');  

$('#page_container').smoothState({
    anchors: '#worked a', 
    onBefore: function($currentTarget, $container) {
        var styled  =   {
            'top' : $currentTarget.offset().top,
            'left' : $currentTarget.offset().left,
            'height' : $currentTarget.outerHeight(),
            'width' : $currentTarget.outerWidth()
        };

        $('#transition').removeClass('active').css(styled).delay(100).queue(function () {
            $('#transition').addClass('active');
        });
    }, 
    onStart : {
        duration: 3000,
        render: function ($container) {
        }
    }
}).data('smoothState');  

[froger]

You could use only one instance of smoothstate for differents animations. See onbefore option, you will have the link clicked in $currentTarget.

I am used to use a data-senario attribute in my links, and fire differents animations from this. Also, having one and only instance ensure that you won't start two animations in the same time.

var animateWorked = false;
$('#main_container').smoothState({
    anchors: 'a',
    onBefore: {
      render: function($currentTarget){
          animateWorked = $currentTarget.parent("#worked").length > 0;
          if(animateWorked){ // do stuff for worked anim
          }else{ // default animation
          }
    }, 
    onStart: { 
        duration: 250,
        render: function () {
            console.log('on worked animation ? ', animateWorked);
        }
    },
}).data('smoothState');