0

I'm trying to achieve slice effect with delay with one timeline.

Demo page with slice effect without delay:
The demo page: http://jsfiddle.net/Wa8m4/5/

What is the best way to achive delay like here:
http://aviathemes.com/aviaslider/?slider=droping-curtain

The code:

/**
* animation step event
*/
$container.on('animationStepEvent', function(e, percent){       

    var maxSlideWidth = WIDTH/SLIDES_NUM
        ,width = percent*maxSlideWidth/100
        ,opacity = percent*1/100;

    $blocks.each(function(index, value){

        var left = maxSlideWidth * index
            ,height = percent*HEIGHT/100;

        $(this).css({
            width: width
            ,height: height
            ,opacity: opacity
            ,left: left
            ,'backgroundPosition': '-' + maxSlideWidth*index + 'px 0'
        });
    });
});

Update:

It seems that it's not possible with one timeline,
the closest effect I was able to achieve: http://jsfiddle.net/RxZJt/4/

thanks to this question:
How to scale down a range of numbers with a known min and max value

Community
  • 1
  • 1
no81no
  • 151
  • 4
  • 6
  • I assume you are using the AviaSlider plugin? Or do you want to make something that looks like it? – JordyV Mar 18 '14 at 19:20
  • No, AviaSlider plugin is just example for effect I'm trying to achieve – no81no Mar 18 '14 at 19:24
  • You could achieve this with an array and a timer. Loop through your array and have a timer of a few milliseconds inside it. Therefore, you also need to give your slices a static value, like an ID. – JordyV Mar 18 '14 at 19:34
  • Thank you, this is an option. But I'd like to know if it's possible with one timer object (like here: http://jsfiddle.net/Wa8m4/5/) ? – no81no Mar 18 '14 at 19:41

0 Answers0