Reversing TweenMax.from Opacity isn't adding CSS original CSS property

[Sumit]

The first "CSS" in the title is a mistake, sorry

 

I use TweenMax.from to fade in an element with opacity. Problem is, if that tween is reversed, the opacity will go back to 0 but not changing it to 1 (original CSS property) after the animation is finished.

 

That means, the tween can't be repeated.

 

JSFiddle: http://jsfiddle.net/kDAqE/7/

 

Click on "tween me", then "reverse me" and then "tween me" again - the element won't show up as Opacity is still 0 from the first reverse. The element should actually show up after the reverse is finished as opacity should be changed to 1 again.

 

Shouldn't reverse() reverse the tween and then add the original CSS properties? Or at least remove all styles that have been given to the element directly (inline CSS).

[Carl]

Your fiddle appears to be working correctly, thanks so much for providing it. Really helps us understand the concepts you are discussing. 

 

Keep in mind that a tween simply allows you to transition between a start and end value.

 

When your tween is FIRST constructed it is configured to tween from opacity of 0 TO the object's CURRENT opacity which is 1.

 

The start value is 0, the end value is 1.

When the tween is reversed it will play backwards until it hits the start value which is 0. 

 

When a tween is reversed it is expected that it goes back to the start value... not a pre-start value. 

 

This is where from() tweens and to() tweens are a little different and I can sort of understand the confusion as with a to() tween the pre-start values are always exactly the same as the start values. A to() tween animates from the current values TO something different. from() tweens on the other hand set the start values as something different than the current values.

 

But still, a single tween only has start and end values to manage. A tween that is reversed can only go back to where it started...  not before it started. Fortunately the platform has plenty of tools that can give you the behavior that you are looking for. 

 

2 things I can suggest.

 

1: if you want to ensure that your tween can always be smoothly played and reversed when you click different buttons, be sure to create your tween once and then call play() and reverse() on it. Creating from() tweens on button clicks is very dangerous as the start and end values can often be the same as you have illustrated with your example. Here is a better approach to your code:

 

var anima;
anima = TweenMax.from($('.inner'), 1, {top: '-=30px', opacity: 0, ease: Power4.easeOut, paused:true});  




$('#tween').click(function() {
   anima.play();
});


$('#reverse').click(function() {
  anima.reverse();  
});

If you want to manage more than the typical 2 states (start and end) of an animation and revert back to some sort of "pre-animation" state on reverse, you could use a TimelineLite like so:

 

var anima;
anima = new TimelineLite({paused:true});


anima.set(".inner", {clearProps:"all"})
.from(".inner", 0.5, {top: '-=30px', opacity: 0, ease: Power4.easeOut, immediateRender:false}) ;






$('#tween').click(function() {
   anima.play();
});


$('#reverse').click(function() {
  anima.reverse();  
});

 

http://jsfiddle.net/C37NV/1/

 

clearProps tells CSSPlugin to remove any particular or all inline styles that it has created on an particular element. 

 

 

[Sumit]

Thank you for the detailed answer. Your non-timeline example doesn't help - the second tween isn't possible as the values from the reverse are still present.

 

Is "clearProps" available in tweenMax? Or is this just a TimelineLite feature?

 

In my opinion, a reverse() on a tweenmax.From should remove it's changed values by default.

 

I would fix the issue like this:

anima = new TweenMax.from($('.inner'), 0.5, {top: '-=30px', opacity: 0, paused:true, ease: Power4.easeOut, onReverseComplete: function() {
$('.inner').css('opacity', '1');
}});

But my case is a bit more complex and the top value is a JS calculated value which i can't give back here.

In case of the Fiddle, this code would result in the inner-div showing up again, but each time you show it it's 30px higher than before.

 

Maybe i'm thinking wrong but to me it would be logical to remove the properties. reverse() with TweenMax.from() is pretty much useless if you can't fire play() again.

 

So again, is cleanProps available in TweenMax?

[Carl]

In my opinion, a reverse() on a tweenmax.From should remove it's changed values by default.

 

 

Sorry, but that would be disastrous for an overwhelming majority of our users. 

It would be extremely awkward for reversed tweens to automatically "snap back" to a state which is in essence the same as the end state. 

 

 

Again, if I create a tween that starts with opacity:0 and ends with opacity:1, when that tween is reversed back to time(0) the opacity has to be 0 and nothing else. 

 

---

 

Yes, clearProps is a feature of CSSPlugin which makes it available to all tweens.

http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html (towards the bottom)

 

 

Perhaps part of the problem is that I'm not fully understanding what you are trying to accomplish. I'm sure there is a way to get the results you are after... it just might not be as simple as using an existing method of the API. 

 

I think clearProps will work for you though if you use it with onReverseComplete. 

 

 

 

 

 

 

 

 

 

[Sumit]

Hi there

 

interesting!. I will go for clearProps but just to learn more about GSAP i will provide my usecase and - if you have time and are willing to do it - i'd really appreciate feedback on how i could accomplish this better.

 

I'm using said tween to open Overlays. Fade and Slide in from -30px top to whatever top value it has in CSS (or given via javascript).

And - to close the overlays - reverse();

var activeSlide = $('.slide.active');

var openOverlay = function(button) {
  // close all existing overlays
  closeOverlay();

  // find targeted overlay of button
  var overlay = activeSlide.find('.'+$(button).attr('data-target'));
    
  if($(overlay).hasClass('q-info')) {
    // two different kinds of overlays. This one always has the same position
  } else if($(overlay).hasClass('plus-info')) {
    // this overlay always appears above the button from which it got triggered
    overlay.css('left', $(button).position().left - 20);
    overlay.css('top', $(button).position().top - overlay.outerHeight() - 50);
  }

  // the GSAP animation    
  animaOverlay = new TweenMax.from(overlay, 0.5, {top: '-=30px', opacity: 0, paused:true, ease: Power4.easeOut, onReverseComplete: function() {
    overlay.removeClass('visible').hide();
  }});

  // show the overlay 
  overlay.addClass('visible').show();
  animaOverlay.play();

  // hide page behind a transparent "curtain"
  var overlayBG = jQuery('<div/>', { 'class': 'overlay-bg' }).appendTo($(button).closest('.slide'));
  $(overlayBG).fadeIn();
  $(overlayBG).click(function() {
     closeOverlay();
  });
} 

var closeOverlay = function() { 
  if(animaOverlay) { 
    // reverse the animation
    animaOverlay.reverse();
  }

  // fade out and remove the curtain
  $('.overlay-bg').fadeOut('fast', function() {
    $('.overlay-bg').remove();
  });
}

I should point out, that i used TweenMax.to before, but because of this bug in Firefox, it's also flawed for my usecase

 

EDIT: sorry, the code was temporarily not available as i had problems with the forum-editor.

The solution with clearProps works like a charm by the way. Thank you!