Jump to content
GreenSock

soupking

CSS quality attribute for easing?

Recommended Posts

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. 

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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. :)

Link to comment
Share on other sites

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,

  • Like 2
Link to comment
Share on other sites

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

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