Jump to content
Search Community

GSAP Split Text Artifacts IE 10,11

Thomas James Thorstensson test
Moderator Tag

Go to solution Solved by Thomas James Thorstensson,

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

Hello Fellow Greensocks,

 

I've noticed some artifacts when I animate text using SplitText library.

 

See screenshot below

 

artifacts.png

 

 

I wonder, can anything be done to solve this in IE11 for example? 

 

I will test adding rotation 0.01 trick, but not sure if it will help. 

 

Any ideas?

 

Thanks for anotherwise excellent product,

 

 

Let the socks be green!

 

 

."S"

 

Link to comment
Share on other sites

  • Solution

Glad you got it figured out Snoop :)

Thanks, you Snoop got it figured.

 

I also can report in, that using staggerTo or staggerFrom instead and just feeding it an array more or less allowed for the same effect, without the rendering issues.

 

And I would like to come with a suggestion, towards the end of this report. Since the rotation:0.01 trick is so common, to make things run faster in some browsers, and seeing that it works, it would be great if there could be a global setter or something where you could just globally on all elements set rotation 0.01. 

(Seeing as It is often a good fix).

 

Many Thanks and I shall now close this post.

 

Until next time,

 

".S"

Link to comment
Share on other sites

It's not so much that rotation:0.01 makes it run faster. It's that it tells the browser to make the transform a 3D transform. Meaning to use translate3d() or matrix3d(), which pushes the element on to its own rendering layer to be rendered with the GPU instead of the CPU.

 

That rotation: 0.01 hack is what we also do in CSS only transitions and animations. It's almost like using z:0.01 with CSS equivalent being transform: translate3d(0,0,0.01px) .. both would force hardware acceleration.

 

The slight rotation hack is best used when translating with x and y to help make it interpolate smooth without jank.

 

Have a great day, happy tweening :)

Link to comment
Share on other sites

It's not so much that rotation:0.01 makes it run faster. It's that it tells the browser to make the transform a 3D transform. Meaning to use translate3d() or matrix3d(), which pushes the element on to its own rendering layer to be rendered with the GPU instead of the CPU.

 

That rotation: 0.01 hack is what we apso do in CSS only transitions and animations. It's almost like using z:0.01 with CSS equivalent being transform: translate3d(0,0,0.01px) .. both would force hardware acceleration.

 

The slight rotation hack is best used when translating with x and y to help make it interpolate smooth without jank.

 

Have a great day, happy tweening :)

 

 

This was a good explanation.; I now know what I did not know before and shall try it in my CSS animations. 

 

Thanks, 

 

I am closing this now, as a fellow green-socker

 

".S"

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