nomn

There is a small problem with the solution. Click and hover events are triggered only on the last line. This can be corrected by assigning z-Index for the first slide 1 and each time you change a slide to increase z-index for each of the next slide. this solution works, but it may have a more elegant solution?

Rodrigo, thanks a lot for your help. You understand my scenario absolutely right, it's works perfectly! I fork your codepen and start reading it line by line to understand the algorithm and get some experience! Thank you!!

I have a small shifts. Now everything works almost like i need. The only thing - the delay between the disappearance of the first three and the emergence of the next three. Ie a few seconds can not see anything, and only then take off the next 3. i'l tried to optimize. My JS now is: var item_wrapper = $(".slid-container"), items = $(".slid-container li"), items_to_append = 3, append_counter; TweenMax.staggerFrom($('.slid-container li').slice( 0, 3 ), 2, {scale:0.5, opacity:0, delay:0.5, ease:Elastic.easeOut, force3D:true}, 0.2); $("#slider-next").click(function(){ TweenMax.staggerTo( $('.slid-container li').slice( 0, 3 ), 2, {scale:0.6, opacity:0, y:-300,delay:0.2, ease:Elastic.easeOut, force3D:true}, 0.2,changePos); return false; }); // Перебор для переноса в конец function changePos() { console.log("changePos"); append_counter = 0; $(".slid-container li").each(function(indx, element){ if(indx < items_to_append) { $(item_wrapper).append($(element)); } }); TweenMax.staggerFromTo($('.slid-container li').slice( 0, 3 ), 2, {scale:0.6, opacity:0, y:-300,delay:0.5, ease:Elastic.easeOut, force3D:true}, {scale:1, opacity:1, y:0,delay:0.5, ease:Elastic.easeOut, force3D:true}, 0.2); }

Thank you very much for your answers. I am pleasantly surprised by the friendliness of your community! Thank you for the mistakes that you have specified. If you look at the code that you have done in codepen, we see that after the first click ">>>" animation loops (for some reason comes only one rectangle. on my local server, come all 3, from 3 <li> to 6 <li>). And, by and large, the question is that why the animation in a loop? Function changePos () is called after the TimelineLite is complete: TimelineLite ({onComplete: changePos}); Watch this: http://codepen.io/anon/pen/OPwOBO Click 3-4 times to " >>> "

Hi. I tried to make codepen, but it isn't work... ;( Please, try to help me without it. I make simple slider, that have some <li>. Every slid is show 3 <li> (without any row container). Next button click is tween first 3 <li> and hide it, next it append first 3 <li> to end of <ul> and show next 3 li. - Its work for me, but 2nd click to "next" will show some noise fast animation and next we will see same <li>'s, that was on 1st "next" click. I think its because styles of hidden <li>'s isn't cleared. I tried use clearProps:"all", .clear() and removeAttr("style") - don't help. Sorry for my English!

I'm so ashamed. Sorry for such a question. Thank you very much

Greeting to GSAP Team! Great thanks for making this amazing tool! Now about my problem, please, if you can, help me with it. I'm trying to tween backgroundPosition, but it's isn't work with some properties. For example: // This is NOT work TweenMax.fromTo($(this).children('a'), 0.8, {backgroundPosition: 'center left'}, {backgroundPosition: 'center right'} ); And this: // Now it Work TweenMax.fromTo($(this).children('a'), 0.8, {backgroundPosition: 'center left'}, {backgroundPosition: 'top center'} ); The starting background position of element (css style) is "center left".