Share Posted April 10, 2014 I am just getting started with GSAP for JS and I am wondering which is more cross-browser friendly and/or performant : a DIV element containing an IMG element a DIV with it's style object's background-image set (via CSS or JS) I am going to be scaling and rotating and it needs to work in the oldest IE that GSAP supports. (as well as all the current and better browsers) Thanks for pointing me in the right direction, Keldon Link to post Share on other sites
Share Posted April 10, 2014 Hello keldon, and Welcome to the GreenSock Forum! Best thing to is try both and see what is best for your situation and project. Here is a codepen example of animating both an image tag and a div tag with a background-image: My example: See the Pen ykJnb by jonathan (@jonathan) on CodePen If you look at the Tweens you will see that i am using the special property called force3D:true to tell the browser to use Hardware Acceleration for smoother animation. Try testing it in different browsers to see how it behaves in multiple browsers. But GSAP is very performance driven. Also some nice reading to learn more about 3D transforms: An article on css-tricks by Jack Doyle about Myth Busting CSS Animations vs Javascript An article by Paul Irish about Why Moving Elements with Translate is better than pos abs top left Using CSS Transforms - MDN Best thing to do is test, test, test, to see what works best for your code. I hope this info helps! 1 Link to post Share on other sites
