Jump to content
Search Community

Blur in Rotation Animation

hackfin 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

Although it is hard to see, I have a slight blur in one of my rotation animations.  If you look at the codepen accordion I created, the arrows that indicate whether a panel is open are rotated when a panel is clicked.  You should notice a slight blur as the arrow is rotated.  Is there a method to setup this animation so that this does not happen or is this a byproduct of using a font-awesome icon as an animated element?  Any suggestions would be appreciated.

See the Pen KvWzPE by hackfin (@hackfin) on CodePen

Link to comment
Share on other sites

Rotating 90.01 does not seem to help.  Is it possible that using an SVG arrow or even a square div with 2 side borders would improve the clarity?  I will try a couple of other methods to see if it corrects this issue.  I will report back my findings.

Link to comment
Share on other sites

Hello @hackfin and welcome to the GreenSock Forums!

 

I only saw this ending jank jump of the animation, in latest Firefox. In Chrome I did not see this behavior, but was the same shape when rotated with its typical sometimes slight webkit bad bug blur that @OSUblake mentioned above. ;)

 

But this happens in Firefox, because layout is being triggered at the end of the animation and triggering a bug.  So how do we stop this from happening you ask?  ... as i hear crickets in response... well, i shall tell you!

 

What i did... I added the CSS property perspective to the arrow's parent (.panel). Even though when animated the arrow only animates with transform: matrix(), which is 2D. The perspective properties 3D goodness will be ignored, but will give its child (.arrow) a new stacking context. On .panel CSS rule I changed position relative to absolute. Also along with position absolute which will bring the element out of the flow of the document, thus allowing your element to stay in place with proper relation to its parent.

 

As rule of thumb, when animating transforms the element should always use position absolute, so it can animate smoother and out of the flow of the document. If not the element will be forced to calculate layout on every render tick, meaning no silky smooth.

 

Just add the below. The combination of both CSS properties will fix this issue in Firefox.

 

/* helps fix ending jank jump in Firefox */

.panel {  
  -webkit-perspective:1000px; /* gives element new stacking context */
  perspective:1000px; /* gives element new stacking context */
}

.arrow {
    position: absolute; /* takes element out of the document flow so no layout is triggered on every tick */
}

 

Check out this please:

 

See the Pen zdJKOd by jonathan (@jonathan) on CodePen

 

Also i notice you are animating properties like  border and text-indent.. just keep in mind that they will only animate on pixel level and will also trigger layout when rendered. Which means not so smooth, like sub-pixel rendering with transforms and opacity.

 

Here is an example of animating scaleX instead of border-width for sub-pixel rendering. So you can see how to animate the line with transforms.

 

See the Pen RNKPLo by jonathan (@jonathan) on CodePen

 

I hope this helps?

 

Happy Tweening :)

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