CODEWITHSUNDEEP
htmlcssgsap
pure_bordem
pure_bordem

Reputation: 159

Force Matrix3d or Scale3d for TweenMax?

Im currently trying to perform a scale and shift of two very large (full page) divs with Tweenmax. While my approach works, it is extremely sluggish in Chrome.

I believe this is because Tweenmax is using Transform: Translate3d(x,y,z) Scale(x,y); and not scale3d or matrix3d. Is there anyway to force Tweenmax to use matrix3d or scale3d?

I have tried using force3d:true and that does not seem to work.

Here is my code, the shift and scale separated to make it easier to read for myself...

TweenMax.to('#background', 0.1, {scale: 1 + (0.05*dist_perc), delay: 0.01, force3D:true});
TweenMax.to('#foreground', 0.1, {scale: 1 + (0.05*dist_perc), delay: 0.01, force3D:true});

TweenMax.to('#background', 0.1, {x: (0.01*(x_mouse - cx_wind)), y: (0.01*(y_mouse - cy_wind)), delay: 0.01, force3D:true});
TweenMax.to('#foreground', 0.1, {x: (0.015*(x_mouse - cx_wind)), y: (0.015*(y_mouse - cy_wind)), delay: 0.01, force3D:true});

Upvotes: 1

Views: 4997

Answers (1)

Jonathan Marzullo
Jonathan Marzullo

Reputation: 7031

Try adding the z property (translateZ) with a slight shift to your tweens z:0.001

TweenMax.to('#background', 0.1, {z:0.001, scale: 1 + (0.05*dist_perc), delay: 0.01, force3D:true});
TweenMax.to('#foreground', 0.1, {z:0.001, scale: 1 + (0.05*dist_perc), delay: 0.01, force3D:true});

TweenMax.to('#background', 0.1, {z:0.001, x: (0.01*(x_mouse - cx_wind)), y: (0.01*(y_mouse - cy_wind)), delay: 0.01, force3D:true});
TweenMax.to('#foreground', 0.1, {z:0.001, x: (0.015*(x_mouse - cx_wind)), y: (0.015*(y_mouse - cy_wind)), delay: 0.01, force3D:true});

See if that works. Make sure you are using the latest version of GSAP. force3D now has another option called force3D:"auto" .. more info found here in the GSAP CSSPlugin.

Also a codepen or jsfiddle example will be really helpful so we can see your code in context and edit it live. Just to make sure you don't have any other CSS or JS that could be causing it not to apply matrix3d()

Upvotes: 2

Related Questions