Jump to content
Search Community

roundProps round to nearest

mdolnik test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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);
Link to comment
Share on other sites

Becuase opacity is a double or a range of decimal point numbers between 1 and 0. ect 0.5 will be half opacity, 1 will be 100% opacity or fully visible and 0 will be completely transparent. By rounding the opacity you will always set the transparency either fully on or fully off with each tick. 

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

Hi,

 

You'll have to create the math for that type of behaviour creating a dummy object with a property with a value of zero, tween that property to 100 using RoundProps, finally using an onUpdate callback divide that number by 100 and apply it to the element, something like this:

var opacityObj = {opacity:0};

TweenLite.to(opacityObj, 1, {opacity:100, roundProps:"opacity", onUpdate:applyOpacity});


function applyOpacity()
{
  var newOpacity = opacityObj.opacity/100;
  TweenLite.set(element, {opacity:newOpacity});
}

You can see it here:

 

See the Pen goeIz by rhernando (@rhernando) on CodePen

 

If you inspect the element you'll see how the opacity values change.

 

Rodrigo.

  • Like 3
Link to comment
Share on other sites

And just a slight optimisation that should help meet your "rate-limiting" requirement -

var opacityObj = {opacity:0, lastOpacity:0};

TweenLite.to(opacityObj, 1, {opacity:100, roundProps:"opacity", onUpdate:applyOpacity});

function applyOpacity()
{
  var newOpacity = opacityObj.opacity/100;
  if (opacityObj.lastOpacity !== newOpacity) {
    opacityObj.lastOpacity = newOpacity;
    TweenLite.set(element, {opacity:newOpacity});
  }
}
  • Like 2
Link to comment
Share on other sites

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)

 

post-19380-0-72120900-1398384519_thumb.png

 

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!?

Link to comment
Share on other sites

What's happening is a small race condition in the initialisation of the .to() tween and resetting of slideOpacityObj. As you may be aware, javascript floats are susceptible to precision issues with some numbers (e.g. 0.2 + 0.1 = 0.30000000000000004) and the way you were sequencing the tweens is affected by this. The "-="+slideTime is the culprit, and could occassionally land before (by .00000000000000001 of a second or whatever) the reset of slideOpacity to opacity:0, breaking the logic of the setup.

 

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

 

Delete this

slideTL.set(slideOpacityObj, {opacity:0});
then change this

slideTL.to(slideOpacityObj, slideTime, {opacity:slideRoundFactor, roundProps:"opacity", onUpdate:applyOpacity, onUpdateParams:[slide_cur]}, "-="+slideTime);
to this

slideTL.fromTo(slideOpacityObj, slideTime, {opacity:0}, {opacity:slideRoundFactor, roundProps:"opacity", onUpdate:applyOpacity, onUpdateParams:[slide_cur]}, "-="+slideTime);
  • Like 2
Link to comment
Share on other sites

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
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...