Jump to content
Search Community

Sumit

Members

  • Posts

    16

  • Joined

  • Last visited

 Content Type 

Posts posted by Sumit

    Parameter complementing onStart & onInit: beforeStart?

    in GSAP

    Posted

    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 

    IE8 animating opacity of transparent png

    in GSAP

    Posted

    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.

     

    ###

    Also if you are dealing with a straight image tag, you could try wrapping the PNG image with a div, and animate the opacity of the parent, instead of the png itself.

     

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

    ###

    or use a background-image on a div and animate the opacity of the div..

     

    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

    IE8 animating opacity of transparent png

    in GSAP

    Posted

    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.

    5vmp6lM.png

     

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

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

    in GSAP

    Posted

    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!

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

    in GSAP

    Posted

    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?

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

    in GSAP

    Posted

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

    wrong top value in FF (correct in chrome)

    in GSAP

    Posted

    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/

    wrong top value in FF (correct in chrome)

    in GSAP

    Posted

    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.

    IE8 animating filter-property removes all existing filters

    in GSAP

    Posted

    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

    IE8 not working with x:

    in GSAP

    Posted

    Hi there,

     

    so i decided to jump ship from jQuery to GSAP for the first time in my next project for a huge client and i'm impressed so far.

    However i'm stumbling across issues in IE8 (bummer).

    This simple tween won't work in IE8 for me

    TweenMax.to($('.slider'), 1, {x: 300px, ease: Power2.easeInOut});

    Changing "x" to "left" will work, if .slider is positioned relative/absolute. Checking the code i see that TweenMax (what i use) is changing the property filter: progid:DXImageTransform.Microsoft.Matrix in IE8, but IE8 is simply refusing to animate anything.

     

    My site is very light at the moment. Almost no code, the only tween so far is the one above so I'm 99% sure it's not a conflict with some other script.

    I use the latest TweenMax.

     

    thanks in advance for any tips. And if x: simply doesn't support IE8 - my bad ;-)

     

×
×
  • Create New...