Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Tom B. @ Wix last won the day on July 4 2014

Tom B. @ Wix had the most liked content!

Tom B. @ Wix

  • Content Count

  • Joined

  • Last visited

  • Days Won


Tom B. @ Wix last won the day on July 4 2014

Tom B. @ Wix had the most liked content!

Community Reputation

2 Newbie

About Tom B. @ Wix

  • Rank
  1. Thanks for the detailed answer Jack. 1st - GSAP is not letting me down in any way. I worked around this days ago on my side. As you said, part of the problem was bad practice on our side But as you can imagine in a project like the Wix Editor we are stretching the abilities of the browser and of various frameworks we work with to their max. You won't believe how many weird edge cases and bugs we encountered and worked around or solved in the past couple of years. We work with libraries like GSAP, React, RequireJS, Zepto, Grunt and many others on the client side, and even more on
  2. Hi Jack, as I told you some time ago, we rewrote our entire system with ReactJS. React uses it's own (very cool) method to render HTML - The general idea is that It holds a virtual JSON representation of the DOM and handles DOM reads and writes for you using precise JSON diff methods in a very performant way. So When you build a site based on React components you actually never interact with the DOM, you interact with React, and React in it's turn decides when its the best time to read or write the DOM. Some of the consequences of this method is that you get a lot of inline style dec
  3. I've come across a bug when applying a transformation on an already rotated element with 3d rendering enabled: You can see the codepen for the live preview I have an element with 180deg rotation and Z transform: <div id="aa" style="transform:rotate(180deg) translateZ(10px)">I'm rotated 180 Deg</div> // On Webkit/Gecko this happens only with z > 0, On IE it happens also with z == 0 And then I run some transform animation on it TweenMax.from('#aa', 2, {x:'+=100'}) The result is that the rotated div flips back to 0 degrees, or, from matrix(-1,0,0,-1,0,0) it transforms t
  4. Sorry for being rude, but you are both stating the obvious, and missing the point. When using Greensock I'm not supposed to worry about vendor prefixes. This is a bug, since I clear the transforms but because of a non-standard Chrome behaviour they are not completely cleared. (Sorry for using 2 different users, the other one is my team's club member user )
  5. I stumbled upon a weird behaviour of clearProps, and couldn't find any reference to whether it is a bug or not. When using clearProps with explicit values the order of the parameters passed has importance when clearing mixed transforms/properties values. This will clear x and y and skip opacity - clearProps:'x, y, opacity' This will clear only "opacity" and skip x and y. clearProps: 'opacity, x, y' Same goes with other non transform values like "clip" See the codepen for clearer example.
  6. Hi I'm building an infinite horizontal image slider that slides when the user hovers over a 'next' or 'previous' buttons. The design requires the animation to gradually pause/resume with a subtle easing and not pause immediately. the only solution I found was to use an infinitely repeating tween for the slider, and attach a second tween to the buttons that tweens the 'timeScale' of the original tween with an easing. Is there a simpler native way to do so without creating a second tween? Thanks
  7. Looks like it works. Cool. thanks
  8. This is great! BUT it doesn't work: line 6220: this._ease = ease.config.apply(ease, v.easeParams); fails because you set this._ease and not change the original ease var. Should be - this._ease = this._ease.config.apply(this._ease, v.easeParams); Or, change it the original passed ease var here - ease = (!ease) ? TweenLite.defaultEase : (ease instanceof Ease) ? ease : (typeof(ease) === "function") ? new Ease(ease, v.easeParams) : _easeMap[ease] || TweenLite.defaultEase; btw, I would have used if(){}else{} and not one liner ternary statements just because it is hard to read an
  9. I'm trying to use 'easeParams' when passing 'ease' as a string. It seems that when an ease is passed as a string 'easeParams' is never read - in TweenMax.js line 6196: if (!ease) { this._ease = TweenLite.defaultEase; } else if (ease instanceof Ease) { this._ease = (v.easeParams instanceof Array) ? ease.config.apply(ease, v.easeParams) : ease; } else { this._ease = (typeof(ease) === "function") ? new Ease(ease, v.easeParams) : _easeMap[ease] || TweenLite.defaultEase; } When ease is a string we get to the last 'else', and then to '_easeMap[ease]' without applying easeParams like in the
  10. oh! how stupid of me, it is working! I couldn't find any reference to this in the documentation, so i didn't even try. Still, I think that the second part of my request is still valid - everywhere in TweenMax, if you pass numbers without values TweenMax normalise them into 'px' values, but not in this case.
  11. Hi I'm playing with some "clip" animations right now, and find myself calculate way too many hardcoded values. [Edit: this functionality exist, I still wish for the array option] I think that an addition of relative values to clip:rect() will add a lot of flexibility. Also, allowing clip to receive an array of values instead of the CSS syntax rect(a,b,c,d) could help ease development too. something like so: // set initial clip:rect(0, 100px, 100px, 0) as required by CSS TweenMax.set(element, {clip: [0, 100, 100, 0]}) // tween from clip:rect(50px, 80px, 100px, 0) TweenMax.f
  12. Is there an event like onComplete that invokes when killing a tween before it was completed?
  13. Ok, so what you are saying is - No, there is no "GreenSock" way to do it and I should do it programatically? It would have been nice to have something like - //Save the current state of an element, and revert TweenMax.from('id', 1, {scale:2, saveProps:true}); TweenMax.revertProps('id'); //Or to reset _gsTransforms without editing it directly TweenMax.setTransformsOrigin('id', {'...new transform values...'}) //Or a way reset _gsTransform to current state on animation start var recurringTween = TweenMax.from('id', 1, {scale:2, resetTransformOnStart:true}); Anyway, thank you, that h