Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by mdolnik

  1. 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:

      border: 5px #000 solid;
    .expanded {

    And im trying to switch between them with:

    $( ".button" ).click(function() {

    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?

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

    • Like 1
  3. 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!?

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


    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:


    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)

  5. 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:


    but doesn't work when I try something like: