TweenMax 용 Force Matrix3d ​​또는 Scale3d?

Question

현재 Im은 Tweenmax를 사용하여 두 개의 매우 큰 (전체 페이지) div의 비율 및 이동을 수행하려고합니다. 내 접근 방식이 효과가 있지만 크롬에서는 매우 부진합니다.

Tweenmax가 이고 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

에 한번 당신의 트윈 을에 약간의 변화와 함께 Z 특성 (translateZ)를 추가 Z : 그 작동하는 경우

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

0.001 참조하십시오. latest version of GSAP을 사용하고 있는지 확인하십시오. force3D에는 이제 force3D라는 또 다른 옵션이 있습니다. "auto" .. GSAP CSSPlugin에서 자세한 정보를 찾을 수 있습니다.

는 또한 codepen 또는 jsfiddle 예를 그래서 우리는 상황에서 코드를 볼 수 있습니다 라이브 편집 정말 도움이 될 것입니다. matrix3d ​​()를 적용하지 않을 수있는 다른 CSS 또는 JS가 없는지 확인하려면