Jump to content

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

Tom B. @ Wix had the most liked content!

Tom B. @ Wix

  • Posts

  • Joined

  • Last visited

  • Days Won


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

Tom B. @ Wix had the most liked content!

Recent Profile Visitors

3,146 profile views

Tom B. @ Wix's Achievements

  1. Tom,


    I have a client who wants to integrate some animation I've done for them into their site. They use WIX for their entire site so I need to install GSAP into WIX before installing the javascript for the animation. I use MorphSVGPlugin so I need to install the full library with their license. Any advice on how to do that? (I'm personally not familiar with WIX but my client is.)

  2. 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 the server side, and we contribute back tons of enhancements and bug fixes every day. To the topic - This bug is a new bug. It doesn't exist for so long, just since chrome 36. Also, many frameworks and preprocessing tools don't try to detect browser prefixes, they just add all the prefixes for the browsers you tell them you support (the very popular Autoprefixer for example). As a framework maintainer you know that you are not living on your own isolated island, you have hundreds of other frameworks and the browsers themselves you have to play nice with. Also, stupid browser bugs come and go with every version and we as developers that our work is seen by millions of people every day have to deal with them. even if they are arbitrary or temporary or not our fault. Thats it. I'll stop poking this issue now.
  3. 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 declarations for mutable values, and, you don't have the opportunity to use DOM heavy tools like GSAP to do elementary operations. We use GSAP almost solely for animations, which by their nature happen after the rendering lifecycle of a site ended, after everything is built and presented to the user where it cannot interfere with with DOM read/write performance. This specific bug happens where someone applies a rotation (not a rotation animation) on a component and the system just applies it somewhere in the rendering process. I eventually worked around this by writing a more robust browser prefix detection function for css transforms, so the -webkit- prefix is no longer applied in Chrome. I still think that since this behaviour of chrome is non-standard, frameworks that by design are built to spare the user the hassle of handling browser prefixes should handle it too. Thanks for the quick replies btw. GSAP Rocks!
  4. 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 to matrix(1,0,0,1,0,0) This does not happen on other rotation angles.
  5. 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 )
  6. 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.
  7. 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
  8. Looks like it works. Cool. thanks
  9. 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 and debug (and js minifiers optimise it anyway ).
  10. 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 2 previous ifs. if I add if (typeof ease === 'string'){ ease = _easeMap[ease]; } Just before the previous code, everything works.
  11. 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.
  12. 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.from(element, {clip: ['+=50', '-=20', '+=0', '+=0']}))
  13. Is there an event like onComplete that invokes when killing a tween before it was completed?