mdolnik

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"}});
});

See the Pen vzayE by anon (@anon) on CodePen

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

I think the best solution would be to combine the reset and the .to() tween together using a .fromTo()

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:

See the Pen Dlcrn by anon (@anon) on CodePen

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

See the Pen Dlcrn by anon (@anon) on CodePen

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);