Tag: gsap

Fix for ‘text scale animation cause font to blur’

TheSmithy

text scale animation cause font to blur – posted in GSAP: When using Chrome the text is blurred during the animation and then at the end the text snaps clear and normal. Does not do that with Firefox or Edge.   How do I get rid of the blur when viewing with Chrome.   Thank you,   Kv2

Source: text scale animation cause font to blur – GSAP – GreenSock

 

It’s a common Chrome bug.

Adding

CSSPlugin.defaultForce3D = false;

to your Javascript file will fix it.

//

You might also find this post helpful: http://greensock.com…ted/#entry36948

A Comparison of Animation Technologies | CSS-Tricks

TheSmithy

Source: A Comparison of Animation Technologies | CSS-Tricks

A really nice overview of pros and cons of current (2016) animation technologies. Some of the main points below. For detailed information, visit the link

Native animation

  • CSS
    pros: great performance, responsiveness.
    cons: chaining multiple animations complicated, quirkiness in css+svg
  • Canvas
    pros: really nice for interaction, good performance
    cons: difficult to make accessible, difficult to make responsive, not retina-ready
  • SMIL
    cons: losing support
  • Web Animations API
    pros: Easy sequencing of animations, good performance
    cons: Support is not great, specs still changing
  • WebGL
    pros: Really good in interactive and 3D effects, amazing visual effects, hardware-accelerated, VR-possibilities
    cons: Tougher to learn, hard to make responsive

Read More