Translate 3D, y or yPercent performance.

[rgfx]

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

[OSUblake]

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.

[rgfx]

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

[Jonathan]

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