Jump to content
Search Community

Setting vendor prefixes in CSS value

klon test
Moderator Tag

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi guys,

 

Coming back to this forum for some simple trouble !

 

I have a flexbox layout, which tweens in many ways, and through many efforts GSAP and flexbox work (almost) perfectly together !

 

Everything works fine in latest Chrome, Firefox and IE (well, some minor border-radius tweening trouble in IE, but... meh).

The troublemakers are Safari / Safari iOS / Chrome iOS and buddies, which still need vendor prefixes for flexboxes.

 

As pointed out in this topic, we can set() prefixes in CSS PROPERTIES this way :

tl.set($('#myDiv'), {css:{"-webkit-flex":0}});

But how about setting prefixes in a CSS property VALUE ?

I have tried things like :

tl.set('#myDiv', {css:{display:'-webkit-flex', display:'flex'}});

As I feared, it seems to be considered a duplicate by browsers.

Testing various situations, I think only the last instance of 'display' is applied, which seems only logical.

Depending on the order, I get my tweens to work on webkit-based browsers, or the others ;-)

 

So, the questions are :

- is there a way to set display right cross-browser ?

- is there a way to do it simply ? xD

 

Cheers to all the GSAP team, you're awesome !

 

================================================================================

 

EDIT :

 

While looking for an answer, I got to : this stackoverflow topic

 

Based on the answers there, I got some workarounds with no tweens : toggling an HTML "flexBox" class with jQuery for instance.

.flexBox {
    display: -webkit-flex;
    display:  -ms-flexbox;
    display:         flex;
}
function addClassFlex(elem) {
    elem.addClass('flexBox');
}

tl.set('#myDiv', {onComplete:addClassFlex, onCompleteParams:[$('#myDiv')]});

Since I need this to happen at a precise point of my timeline, I got nothing better than this callback yet.

Does it sound ok to you guys ? Anything better to propose ? (awful use of callbacks, and I dislike messing with styles in the HTML...)

Link to comment
Share on other sites

  • Solution

Sure, you could do that. But I wouldn't do a set() - it should be a simple call() instead:

tl.call(addClassFlex, [$("#myDiv")]);

Or you could do a className set so that it works backwards and forwards in the timeline:

tl.set("#myDiv", {className:"+=flexBox"});

Do either of these work okay for you? 

Link to comment
Share on other sites

Hi Jack,

 

Yep, both work fine in cleaning my code (still learning GSAP, should've thought of call() at least !).

 

No better solution to provide than this class "flexBox" for the initial problem, I guess ? ;-)

 

Thx a lot !

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...