CSS quality attribute for easing?

[soupking]

Hi Greensock,

 

This is more likely a CSS question than a GSAP one, but...

 

I once used a CSS attribute method that made certain animations smoother. The thing is I can't remember the darn name. 

 

It wasn't so much an alias setting but had to do with something else to make animation less fidgety.

 

Does anybody out there know what I'm talking about? I have some animations with borders and I'd like to firm them up. I've been trying to find it, but can't really remember what terms I would to search.

 

It might have something to do with WebGL. Still looking...found 'image-rendering'. But that wasn't it either. I remember it being very off/on. 

 

Thanks for reading and for any possible feedback. 

[GreenSock]

You might be talking about will-change, but be careful: https://greensock.com/will-change

 

In some cases it seems to work nicely. In other cases, it's a mess. 

 

If you're trying to get rid of some of the snapping that some of the browsers do, you could try giving your elements a very slight rotation (even 0.1) or shift it in 3D space by like 1px or something, just to force the browser to kick in different rendering algorithms. 

 

Does that help at all? 

[soupking]

It might. I haven't seen 'will-change' before though. That's new to me.

 

It was some kind of rendering setting or something similar to like cache bitmap or the setting in flash that made images tween better. 

 

It wasn't like a 'quality:great' kind of setting or anything. It had more to do with image processing but I can't for the life of me remember what it was. 

 

It helped in a pinch for something I was doing at an agency like 2 years ago. I've been away from work for over a year now and just don't remember. It might have had something to do with 3D transition, but I'm thinking it was more over arching that specifically that.

 

Thanks for the response.

[soupking]

Ah! Found it --

force3D:true

 

I guess it was 3Dish. I don't think I was using 3D transforms at the time, but it helped steady the animation. 

 

I found it in a LinkedIn messaging board. Just remember I shared it with a previous co-worker. Glad I did. It's not in the CSS reference I found online.

 

You've probably used it before but if not, feel free to give it a go. I can't remember what I was working on at the time but it fixed some glitchy wonkiness were were trying to solve at the time.

 

Best,

[Carl]

force3D is a property specific to our CSSPlugin, which basically allows the engine to optimize performance of transforms. You can read about it here: https://greensock.com/docs/Plugins/CSSPlugin#force3D

[soupking]

Sounds about right from what I remember. I will take a look. Thanks Carl!