klon

Yup, thought so. Doesn't belong to GSAP's playground to begin with ! Thx a lot for your help, everything works fine now !

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 !

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...)

Thanks for asking. Thanks for answering. Love GSAP more and more each day.

[EDIT : Thanks Carl, your reply was indeed a solution to my question... In the meantime, I came to understand better how to use GSAP, which made my very question obsolete ! Sorry about that :/] Hi Carl, thanks for your time ! Your first proposition : tweening a tween, how pervert ! I think it will do the trick, with some adjustments... Your second propostion : that's what I first tried, feels natural, but I can't manage to pull it off... About creating tweens on the fly That's clearly the most intuitive way to do, but in many situations I can't build the "open this hero" tween. For instance : /* this one works (I love GSAP) */ function T_closeHero() { return TweenLite.to('#hero', 0.7 ,{minHeight:0, height:0, flex:'none'}); } /* This one won't work, I accept it */ function T_openHero() { return TweenLite.to('#hero', 0.7 ,{minHeight:'380px', height:'auto', flex:'1'}); } Therefore, I chose to "openHero" by reversing "closeHero", thanks to Diaco's help. If I could make "openHero" to work, well... About your proposition to tween my tweens That sounds wonderful. I think the thing to do if I use that trick is to overwrite when needed. Here is my logic. When the user orders to open/close #someHero : #someHero should try to get open/closed, no matter what was ordered before #someHero should start its animation from where it was (no "jump") With that idea in mind, I played a bit with overwrite : It seems to work, though I can't get to change the default overwrite for some reason. The huge problem with this solution is the duration of the tweens. They will take ".duration()" on the timeline no matter what. If #someHero is already open, it shouldn't take time when I re-order it to open. So I did the math and now it behaves exactly the way I want. But doing the math, isn't it what we want to avoid ? var duration = 1; var T_close_hero1 = TweenLite.to('#hero1', duration, {height:0, ease:Linear.easeNone}).pause(); var T_close_hero2 = TweenLite.to('#hero2', duration, {height:0, ease:Linear.easeNone}).pause(); $('#button1').click(function(){ var tl = new TimelineLite(); tl.to(T_close_hero1, (1 - T_close_hero1.progress())*duration, {progress:1, overwrite:"all"}) .to(T_close_hero2, (1 - T_close_hero2.progress())*duration, {progress:1, overwrite:"all"}) }); $('#button2').click(function(){ var tl = new TimelineLite(); tl.to(T_close_hero1, T_close_hero1.progress()*duration, {progress:0, overwrite:"all"}) .to(T_close_hero2, T_close_hero2.progress()*duration, {progress:0, overwrite:"all"}) }); $('#button3').click(function(){ var tl = new TimelineLite(); tl.to(T_close_hero1, T_close_hero1.progress()*duration, {progress:0, overwrite:"all"}) .to(T_close_hero2, (1 - T_close_hero2.progress())*duration, {progress:1, overwrite:"all"}) }); What I need now If I can build a working tween to slide down a flexbox with unknown height, it solves all my problems. This would mean having a working "slideDown()" function in this entirely different problem. If I can't, well, how can I get the behaviour from the last codepen without doing all that math ?(and believe me, I love math, those calculations don't seem complicated at all, but I feel like I'm losing the beauty of GSAP when I do any calculation like that !) Hope you'll find the courage to read all that, can't blame you if not ! Cheers

Dear GSAP developpers, First of all, thanks for your library, which is now the only source of animation for the website I'm coding. Despite all my efforts, I can't find a way to work around my wish to use the same tween in multiple timelines. Yes, I can easily play a Tween and reverse it whenever I want (see the Codepen)... Yes, I can easily create a Timeline for one specific situation... But no, I can't find how to control a tween being played in a timeline from another timeline ! This Codepen's HTML describes what I would like to achieve. The buttons perform as I expect them to, except for the sequence requirement (#hero1, THEN #hero2). Obviously, I would like to use a TimelineLite for each sequence (using delays is not an option if the number of tweens involved increases), to allow the opening/closing of each #hero to be reversed midway if the user decides so. I guess my trouble comes from this (found in FAQ) : Any idea on how to get the behaviour I describe in the codepen's HTML ? [EDIT : I initially came to GSAP to avoid using callbacks, please don't tell me that's the solution :/] [EDIT : I just realized the problem as I put it is easy to solve. What I need is to AVOID at all costs using more than one tween for each object I work on. No problem with maniuplating in any way the tweens I declared, though. This forked codepen doesn't work, due to the funny behaviour when you quickly click on buttons]

First of all, it works on my example. Thanks ! I'll try it in my project and see if it solves all my slideUp/Down configurations. [EDIT : alright, got most of this figured out by myself... Perhaps...] But, to be honest, I'm puzzled... 1) From what I understand after looking at the documentation, you're first building in the variable T the reversed slideUp tween, ie the slideDown. Then, on each click on the header, "!T.reversed()" is used to toggle the reversed() state (true/false). Which means the first click sets T.reversed() to false and triggers the slideUp animation at the same time. Further clicks will then trigger slideDown, slideUp, ..., well, toggle. Am I correct ? 2) Assuming I was correct, you are basically reversing a reversed animation. My eyes tell me your code works. But my mind keeps wondering HOW THE HELL DID YOU THINK ABOUT SUCH A TRICK ? xD. I would be highly grateful if you could explain me the reasoning behind such a solution. Following those questions, I needed control over slideUp and slideDown separately. I made this codepen. Works perfectly on my example ! Sounds reasonable to you ? If so, one last question : 3) How can I declare and store a tween in a variable for later, without executing it ? Because I noticed the variable declaration triggers the animation. I'm hoping to declare all my animation tweens on webpage load, then activate a timeline based on those tweens when the user interacts with the webpage. Oh well, too many questions, I'm sick of myself for being useless... By the way Diaco, love you for helping me, and love your profile picture !

Thanks for your replies ! The code given by Diaco seemed logical to me, so I tried it on one of my flexboxes. I'm still having trouble, so I made a CodePen this time http://codepen.io/anon/pen/BNXXQg I need that red section to be togglable. I guessed the trouble comes from the "flex: 1;" in the CSS, so I added this property to the tweens. The result is a toggle at the end of the 2sec duration, but no transition. Not a surprise to me : I guess asking for a transition from flex:0 to flex:1 is not really easy to animate... Any idea on how to perform my flexbox toggle ? Thx ! PS: @OSUblake : sexy bouncing, I got stars in my eyes

Hi everybody, I'm brand new to GSAP after having been pointed to you today. From what I've seen so far, I'm very tempted to get rid of my jQueryUI functions in favor of jQuery/TweenLite or Max solutions. The thing is, my project's layout is heavily based on flexbox. Therefore, I'm concerned about how GSAP will interact with my flexboxes. I'll start by asking a (rather) simple question. Here is what I need to achieve : - I have a div which should toggle the same way as it does with jQueryUI's " .toggle('blind',...)" - I need this toggle functionality to be triggered on a flexbox with responsive dimensions Can I get such a behavior with GSAP ? How ? Do I have to be wary of what will happen if I resize my window during the animation ? or between two toggles ? Assuming I have solved my main problem, I'll add a last requirement : what if the flexbox I'm working on has a min-height applied ? Thanks a lot for any advice on how to make GSAP and flexbox work together for the best ! Kisses