mdolnik

How do I access the 2.x docs?

I am trying to animate back and forth between two css classes and I'm having some issues right now I have two classes "contracted" and "expanded: .button{ border: 5px #000 solid; } .contracted{ width:100px; height:100px; background-color:green; } .expanded { width:200px; height:200px; background-color:red; } And im trying to switch between them with: $( ".button" ).click(function() { TweenMax.to(".contracted",2,{css:{className:"+=expanded"}}).set(".contracted",{delay:5,css:{className:"-=contracted"}}); TweenMax.to(".expanded",2,{css:{className:"+=contracted"}}).set(".expanded",{delay:5,css:{className:"-=expanded"}}); }); http://codepen.io/anon/pen/vzayE And it will tween from "contracted" to "expanded"... but not vice-versa... Is there a proper way to switch classes?

I'm also not sure if OnComplete is ever called in a yoyo infinite-repeats situation so I just settled for something like this: slideReversed = false; slideTL = new TimelineMax({onComplete:changeReversed, onReverseComplete:changeReversed }); function changeReversed(){ if(slideReversed){ slideReversed = false; }else{ slideReversed = true; } slideTL.reversed(slideReversed); }

Is there any way to find out whether an animation is playing in reverse at any given point when yoyo=true and repeat=-1 ? I know there is the method myAnimation.reversed(); but as the docs say: This value is not affected by yoyo repeats

That definitely did fix the issue, thanks for your help... with the whole paradigm of using a variable to control the opacity, I didnt even think of using fromTo to reset the variable to 0. Again, thanks! CodePen is updated: http://codepen.io/anon/pen/Dlcrn

Thanks a bunch for helping me with this... I have come pretty far with what you have provided... I have the rapid slideshow working pretty well with the rounding to an adjustable degree, as well as various adjusting factors http://codepen.io/anon/pen/Dlcrn But one thing I just cannot figure out for the life of me is the 20th tween doesnt seem to register (in the codepen a few seconds in you will see what seems like a missing image). If you check out the console in the codepen above, it will show #image_110 will not change opacity, yet 109 and 111 (and the rest) will... (btw 110 is the 20th image of the range of 90-120) The onUpdate is firing, but doesnt seem to want to update the opacity value of 'slideOpacityObj' If the image range is changed to something like, say, 50-100... then the culprit will be image_70... what is wrong with the 20th!?

Sorry, I guess I wasn't clear enough... The rounding to the nearest integer (either 1 or 0 in this case) is not what I want (for the reasons you mention) During the tweening (without roundProps) the opacity will have percentages with ridiculously small changes... ie: frame 1: 0.99996 frame 2: 0.99985 frame 3: 0.99974 ~ frame 10: 0.98564 frame 11: 0.98563 Where I would like it to round to the tenth or hundredth decimal place: ie: frame 1: 0.99 frame 2: 0.99 frame 3: 0.99 ~ frame 10: 0.98 frame 11: 0.98 ...which I would assume would cause less draw calls I have also tried calling the onUpdate function, but I dont know how to adjust the values such as opacity on/after each frame (and dont know if rounding at that point would help any efficiency)

I am trying to do a rapid cross-fade slideshow (a sort of timelapse effect) and it works as expected so far, but the amount/speed of the images (~300 images @ 2 images/second) that are being loaded are slowing other animations down. Since the opacity is being adjusted down to a very fine level, I figured rounding the number would help the many calls that are happening. I found the roundProps feature and it works as intended, except it becomes pointless when dealing with opacity (will jump straight from 1 to 0). TweenMax.to(obj, 0.5, {autoAlpha:0, roundProps:["opacity"]}); Is there anyway to round to the nearest tenth or hundredth? ... On a similar note, is there any way to adjust the frame rate on an individual timeline? This will change all of the timelines' frame rates: TweenLite.ticker.fps(20); but doesn't work when I try something like: myTimeline.ticker.fps(20);