Sumit

Yup got it, thanks. In my defence: On the AS v11 docs, "Actionscript" isn't mentoined once in there so I couldn't tell as i got a direct link from Google.

Ohhh... darn you Google! Thanks! https://www.google.de/search?q=tweenmax+api&rlz=1C1CHFX_deDE565DE566&oq=tweenmax+api&aqs=chrome.0.69i59j0j69i60j0l3.4866j0j7&sourceid=chrome&espv=210&es_sm=93&ie=UTF-8

Allright thanks that'll do it. As onInit is no longer available, do i have to assume this API doc is out of date? http://www.greensock.com/as/docs/tween/com/greensock/TweenMax.html

After thinking more about it: in case the delay isn't applied when the tween is just replayed via play(), i guess beforeStart would be pointless and onInit does what i want. I'm not quite sure

Hi there, as far as i know, onInit runs once on initialization of the tween while onStart runs every time the tween starts playing. Is there a parameter like beforeStart? I basically want my code to run everytime the tween is played, but before the delay. E.g.: TweenMax.to(el, 2, { left: -307, delay: 4, onInit: function() { // code runs ONCE at 0 seconds }, onStart: function() { // code runs after 4 seconds delay }, onComplete: function() { // code runs after 6 seconds delay+duration }, beforeStart: function() { // code runs EVERY TIME (just like onStart) at 0 seconds } }); Of course if there is no delay, onInit, beforeStart and onStart would run at the same time. Is there a parameter like this allready that i don't find? Thanks in advance for any help. PS.: i can work around this issue by running my code outside of the tween - it's just a preference of order for me

Hi guys, thanks for all the feedback. ### Here's a JSFiddle of - pretty much - exactly my usecase with the same image (png32). http://jsfiddle.net/xhkAm/ ### This code: .imagePNG { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="your image url", sizingMethod="crop"; zoom:1; } Breaks my site completely. Zoom: 1 alone doesn't help. ### Unfortunately i'm dealing with a background-image. That's also why i haven't tried the code from the linked stackoverflow-question: var i; for (i in document.images) { if (document.images[i].src) { var imgSrc = document.images[i].src; if (imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG') { document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')"; } } } ### This is what i'm doing. The screenshot in my first post is a background-image. Exact scenario in my Fiddle, linked above. ### I couldn't try out the 1.10.3 preview3 of GSAP yet. Is it meant to fix / improve this issue entirely or just if an IMG-tag is used? Thanks again for all the suggestions and help. Great forums. Sumit

Hi there, animating opacity of a png with transparent parts shows bugs in IE8, i believe because the same MSIE filters are used to animate the opacity and to display the transparency of a png - and now they overwrite each other. This is a screenshot in the middle of the animation. I can confirm that this has to do with the filters, because if i apply filter:alpha(opacity=80); to an element with a png (with transparent parts) as a background-image, the effect seen in the screenshot is permanent. While i can fix this by not applying the opacity filter on the element, i can't fix the animation part. Here's a stackoverflow-question about the same issue. If you're considering adressing this issue in GSAP animations, keep in mind the issue is not only for IMG tags but for background-images as well. I'd provide a fiddle, but neither JSfiddle nor Codepen seem to have IE8 support (who knew? :-/ ) On a sidenote: "Drag to Resize" in this forum editor doesn't seem to work (current Chrome, Windows 7).

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!

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?

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

Thank you for pointing me to the browser differences. I would still argue that GSAP is doing something wrong here. Let's say the offset between inner and outer DIV is 50px. And now I use tween.FROM Using relative values (-=30px), GSAP should tween the top value in chrome: -30px to 0 firefox: 20px to 50px Instead, GSAP is ignoring the top-value in Firefox and just adds 30px to 50px (calculated value). Fiddle: http://jsfiddle.net/kDAqE/5/

Hi there, i built a JSFiddle to show the issue: http://jsfiddle.net/kDAqE/ you'll see - firefox doesn't animate correctly from -30 to 0px. Instead the animation tweens to some random number - 94px in this case. Maybe it starts at the elements current position calculated by the browser, forgets the CSS (top: -30px) and adds 30px. However it should start at the elements current CSS position which is -30px and add 30px. Animation is correct in Chrome.

Allright i solved it by assigning my filter with !important. IE8 will apply both filters then - which is wrong of course, but good for me right now BTW: tested with IE10 - dev tools - IE8 mode on Windows 7.

Hi there, so i'm trying to animate the opacity of an element with a gradient. The gradient of course is added via filter (for IE8): filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); Now when i animate the opacity, it seems the new filter overwrites the old one: filter: alpha(opacity=100); Is there a way i/you could keep the old values of filter? Thanks in advance Sumit

I'm including TweenMax via http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js Your test works for me as well. Sadly i don't have time right now to dig into the provided link to the "clipping effect" problem as these are two very long posts so I just use "left: " instead. Thanks for the help!