rgfx

Translate 3D, y or yPercent performance.

Recommended Posts

Hello,

 

Been getting my head around scrolling parallax effects. Keep reading that using translate3d and modifying z and scale is the performant way to go. I don't like this idea as it doesn't work in IE11. 

 

I think animating y or yPercent, and changing speed to create the depth is my best cross-browser option. Seems one uses translate another matrix. Maybe there is a way I don't even know about. 

 

What do you suggest I do for best performance?

 

Thanks. 

See the Pen PEzJdp by rgfx (@rgfx) on CodePen

Share this post


Link to post
Share on other sites

yPercent is the easiest, but the slowest because it has to calculate more stuff because it's based on the size of the element. And the reason for the translate and matrix transform is so that you can animate yPercent and y separately.

TweenLite.to(box, 1, {
  yPercent: -50, // translate value
  y: 100 // matrix value
})

 

GSAP has some performance stuff built in. Inspect your middle box (box2). GSAP switches from 3d to 2d at the end. However, if you set force3D to true, it will only use 3d.

 

But really, your best bet is to just test and see what works best for what you're doing. Performance will vary a lot depending on what you're animating, and the browser. Setting will-change: transform in your CSS might provide the best performance for Chrome, but if you try that in Firefox and the element is too big, you might get a warning in your console saying that the surface area is too big, and will-change has been canceled. It's definitely frustrating figuring out what works best for everything.

  • Like 6
  • Thanks 1

Share this post


Link to post
Share on other sites

Thanks, Just wanted to make sure the was no clear solution. I didn't notice that GSAP was using tanslate3d then switching to 2D good to know.  Finally made it to level open performance tab, a good milestone if you ask me :)

  • Like 1

Share this post


Link to post
Share on other sites

Hello @rgfx.

In GSAP you can force an element that uses only matrix() or translate() to use matrix3d() or translate3d() if you add either a rotation, skew, or translateZ (z). So you will have to play with it and have your browser inspector open to view what the element is using. If your doing just a scale or translate (x or y), then just add a slight rotation of 0.01, which can give you an output of either matrix3d() or translate3d().

 

Happy Tweening :)

  • Like 4
  • Thanks 1

Share this post


Link to post
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.