Missing Vendor Prefixes - TweenMax.to

[TeamHype]

Hi everyone!

I am working on a project at the moment, and I am using this code snippet:

TweenMax.set(convertForm, { y: -30, autoAlpha: 0, force3D: true });

^{*Note I have tried without the force3D too.}

And it is generating the following CSS:

visibility: hidden;
opacity: 0;
transform: translate3d(0px, -30px, 0px);

However the problem I am having is that the transform doesn't have any vendor prefixes, how can I change this, as I need the animation to work across multiple browsers.

Many thanks in advance!

[Jonathan]

Hello TeamHype

 

This is not a bug, issue, or a missing feature, GSAP will only add the vender prefix when needed!

 

The practice of adding multiple vendor prefixes is used when it is applied in a CSS style-sheet. GSAP applies the CSS properties using JavaScript so it has checks in place to know what browser it is running in and when a vendor prefix is required!

 

GSAP wont just add unneeded vendor prefixes when not required, so that you dont have to worry about the cross browser blues. GSAP is smart enough to know when to add the vendor prefix or when not to add it so it doesn't add bloat to the DOM in the inline styles.

 

For example:

 

-webkit-transform is only needed for older versions of webkit in older versions of Android, which GSAP already checks against.

 

Be assured GSAP has you covered regarding cross browser compatibility, and when to use or not use CSS vendor prefixes.

 

Does that answer your question?

 

Happy Tweening