Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mimeartist

Close enough?

Recommended Posts

I'm doing some animation that doesn't need to be pixel perfect, infact it would be better if it was slightly 'off'... Is there a way to get a tween to stop when it's within a few pixels of the destination...

 

Also how do I get it to report the position that isn't rounded, should I be using x rather than left?

 

 

 

See the Pen KaObMG by mimeArtist (@mimeArtist) on CodePen

Link to comment
Share on other sites

Hello,

 

I'm not near my computer but if you want sub-pixel rendering when not using CSS transforms, then please add this to your tween that animates the left position offset property.

autoRound: false

autoRound is part of the CSSPlugin

 

https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

  • autoRound
    By default, CSSPlugin will round pixel values and zIndex to the closest integer during the tween (the inbetween values) because it improves browser performance, but if you'd rather disable that behavior, pass autoRound:false in the css object. You can still use the RoundPropsPlugin to manually define properties that you want rounded.

As far as stopping a few pixels from the destination just subtract a few pixels from your left value in your to() tween.

 

Also its better to animate x instead of left which will animate on a sub-pixel level by default, then you wont need to use autoRound:false. Plus animating x will animate smoother than using left. left will cause layout to be calculated on every tick.

 

Please see GreenSock's Jack article on CSS Tricks:

 

https://css-tricks.com/myth-busting-css-animations-vs-javascript/

 

:)

  • Like 2
Link to comment
Share on other sites

For the record, browsers always snap "top" and "left" values to whole pixels anyway, so even if you turn off GSAP's autoRound feature, it won't look any different. For example, if GSAP sets element.style.left = "50.4px" the browser will just make it "50px". 

 

As Jonathan suggested, I'd stick with "x". And I do find it very odd that you want the tween to actually stop before it reaches its destination (rather than just tweaking the destination), but you could do it by using an onUpdate that checks how close it is to the final value and just kill() the tween whenever you want. Or tween the tween's progress value to a smaller value, like 0.98. Lots of options. 

  • Like 3
Link to comment
Share on other sites

Thanks for the replies... this has always confused me... where should I be definiing X in the CSS? and why does it update the position but stick at 10px?

 

See the Pen mRNvwQ by mimeArtist (@mimeArtist) on CodePen

Link to comment
Share on other sites

Hi mimeartist :)

 

Please try this on line 7 of your reportLeft() function:

boxX = this.target[0]._gsTransform.x;

Happy tweening.

:)

  • Like 3
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.
×