Force Matrix3d ​​или Scale3d для TweenMax?

Question

Im в настоящее время пытается выполнить масштаб и сдвиг двух очень больших (полных страниц) div с Tweenmax. Хотя мой подход работает, он чрезвычайно вялый в Chrome.

Я считаю, что это потому, что Tweenmax использует Transform: Translate3d(x,y,z) Scale(x,y);, а не scale3d или matrix3d. Есть ли способ заставить Tweenmax использовать matrix3d или scale3d?

Я попытался использовать force3d:true, и это не работает.

Вот мой код, сдвиг и масштаб разделен, чтобы сделать его легче читать для себя ...

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}); 

Answer 1

Попробуйте добавить г свойства (translateZ) с небольшим сдвигом к вашей анимации г: 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}); 

Смотрите, если это работает. Убедитесь, что вы используете latest version of GSAP. force3D теперь имеет еще один вариант: force3D: «auto» .. подробнее находится здесь GSAP CSSPlugin.

Также codepen или jsfiddle пример будет очень полезно, чтобы мы могли увидеть код в контексте и редактировать его в прямом эфире. Просто чтобы убедиться, что у вас нет других CSS или JS, которые могли бы заставить его не применять matrix3d ​​()