gani

Great idea, thanks

Hi, My question may sounds a little bit stupid - Is there a way to iterate throgh each item's prop with staggerTo without using too many loops? What i want to implement is somethink like this: $boxes.each(function(i, box){ var $box = jQuery(box); var animation = new TimelineLite({ paused: true }); animation.staggerTo($box, 1, {left: $box.position().left, top: $box.position().top }); this.animation = animation; }); // OR even better: var animation = new TimelineLite({ paused: true }); animation.staggerTo($boxes, 1, {left: $box.position().left, top: $box.position().top }); Any help would be greatly appreciated

With the above optimizations the animations are a lot smoother than before (fps is between 45-65). Thanks everyone .

The first idea that come up in my mind is to target your elem through something that already exists. If you are using jQuery, you could try: TweenLite.to($('body').find('.your-elem'), 1, {top: "30px"}); For sure this is not the most optimize solution but I'm newbie in gsap and maybe you have to check is the lib has update method or supports triggering custom events.

Personally for me, the result that came from the second icon click must be the default browsers behaviour because you have stacked 4 divs(.day) one over another. Why you can click on the second icon for the first time? Maybe when you doesn't have any z-index property for absolute/relative/fixed elems modern browsers is trying to show the triggerable elems on top on the 'neutral' ones. Why you can't click on the second icon again? When you click on the second icon, the animations add transform property to the latest 3 divs which imperatives tell the browser to handle the z-index (read the docs for more info - http://dev.w3.org/csswg/css-transforms/#transform-rendering). If you check your example in older browsers I'm pretty sure that none of the icons would be clickable because the latest .day will stay alway on top. How to fix it? There are a lot of solutions but I would recommend you: to reset the z-index (set a z-index: 1; for example to all .day to prevent strange and unexpected behaviour) and move the icons outside of the divs. p.s. Sorry for my bad English

Hi, I'm new in gsap and need a little help. I have an animation that triggers on each scroll event and sometimes the animation stutters badly. The fps meter shows values from 9 to 55. (I'm trying to animate divs with png background). Rough version of my code: var scrollPosition = 0, lastScrollTop = 0; $(window).scroll(function(){ scrollPosition = $myWindow.scrollTop(); if (scrollPosition > lastScrollTop){ // --- scroll down TweenLite.to($('.boxes'), 2.5, {top: "+=50px", force3D:true, ease:Quad.easeInOut}, 0.25); } else { // --- scroll up TweenLite.to($('.boxes'), 2.5, {top: "-=50px", force3D:true, ease:Quad.easeInOut}, 0.25); } // --- update last scroll lastScrollTop = scrollPosition; }); Is there something that I could optimize, must I use timelines etc.? Any help would be greatly appreciated p.s. sorry for my bad English