Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

9 Newbie

About Ninili

  • Rank

Recent Profile Visitors

2,399 profile views
  1. Thank you Blake until then I ignore the warnings. Also working with the PIXIJS definitions looks quirky. The definitions look fine but I wonder if PhpStorm can handle multiple inheritances, at least with pure Javascript. It always tells me that "X is not assignable to parameter of type Y", but X actually inherited from Y and should be allowed there ... and a lot more ... But I'm still learning PHPStorm and having one eureka moment after the other. But that's an entirely different story I've been working with sublime text and flashDevelop for AS3 for a long time.
  2. Now with the new TypeScript definitions ( "GSAP" instead of "greensock") we have a problem with pure Javascript: The definitions are all for the namespace gsap, like if you type gsap.TweenMax.to(...); syntax highlighting and type checking works. I had to go to the DefinitelyTyped github page to finally find out that all GSAP types are inside a "gsap" namespace. But the code doesn't work with this namespace, because in the Javascript CDN, it is not defined. How can I get around this? I have PHPStorm for some weeks, so I don't know the super-secret settin
  3. Another strange oservation: There seem to be cases when inlining JPG images as base64 in HTML yields a smaller data size than using actual image files. In this case, the huffman codes are NOT optimized. Maybe that is the cause and the gzip "finishes" what the un-optimized Huffman didn't get.
  4. One thing I really like is the "copy Data-URI" option This is great for testing on codepen. Although I have a pro account there and could upload every asset, it's quite a mess when you have like 25 files, all by the name "logo.jpg" or "product.png". Okay, having BASE64 in the code is ALSO a big mess, but after all a quick and easy method to test stuff. I once wrote my own "transparent JPG" compressor which used a very similar approach like Christophs: ...but it doesn't have all the controls for all the detailed aspects of compression, because it uses built-in Browser image com
  5. Thanks Jack! I wonder if this could be run as a "CustomEase" module, also performance-wise. I noticed that there is a function that converts Eases into SVG paths that is also used in the Ease Visualizer. And those are optimized for runtime performance. The way I did the blending, there are at most 4 tweening and easing processes running at the same time: 1. the main timeline that contains the "gradient" 2. the source easing function 3. the destination easing function 4. The "how to blend" easing function ... one could even ease the main timeline to enable some funky time-distorti
  6. Sometimes I thought it would be nice to blend easings from one type to another while time goes by. And then it would be cool to have as much control over how the blending is done as possible. So I created a showcase, not yet a real easing plugin. I don't know how useful it might be to GSAP users, but there are some applications like: Going from linear to an elastic ending or from rough ease to clean ease. This might be especially interesting for long tweens maybe. The syntax is: mixTween(eases,ratios,blendTweens) // example: mixTween( [Linear.easeNone,Elastic.easeOut], [0.2,0.
  7. Some years ago I've been using Adobe Edge, but when it got released, the authoring program itself ran so damn slow on my computer, I just couldn't use it at all anymore (refresh rates of 1 fps). Most of the time, I did everything by hand, using CSS3 animations or wherever allowed GSAP or portions of it. There were some "old-fashioned" customers who insisted on the old 40kb size (incuding _everything_) and still there were ways to do it. I rendered texts to SVG outlines to avoid loading font files or having jagged bitmap-texts. But at the moment I find that Adobe Animate (formerly Flash)
  8. Using the modifiers plugin I often thought about how cool it would be to have access to more than one variable at the same time. How could this be achieved in a way that would be simple to understand? I think this syntax would be cool: TweenMax.to($obj,5,{ modifiers:{ "x,y,rotation":function(x,y,rotation,target) { return { // Doesn't make much sense, but ... the possibilities! x:rotation > 90 ? x : -x, y:y+Math.random()*50, rotation:rotation % 90 + x*y } } } }); The modifier function would be automatically passed the varia
  9. Thanks for all the responses! What I was thinking about was actually order of operations, thanks for the links, Jonathan. I searched a lot in the forums, but it was rather hard to find the right terms to describe what I was looking for. I'll then stick for native translates or nested containers for more complex transforms. It's actually very rare that I need any other kind of Transform other than those GSAP already provide.
  10. Is there any way to have multiple transformes chained in a distinct order with GSAP? With SVG you can write all transforms in the "transform" attribute and they will be executed in the reverse order, like: <circle r="20" transform="scale(2) rotate(20) translate(-20,0)"/> this will move the circle 20 units to the left, rotate it by 20° (having it's origin still at 0,0) and then scale it by 2. a different order of transforms will yield a different result. I wonder if it would be possible to be able to chain transforms like that in GSAP, but with any element, like this: TweenMax.t
  11. Ninili

    Circular motion

    Now a client asked for an animation where some items, arranged on a circle, should be rotated around while, of course, staying upright, because underneath each icon, there was a description. I didn't want to re-write the whole SVG to use my old function, I wanted to rotate alle the icons just as they were, from their initial position in a rotating manner. This is how it all worked out, again usign the wonderful cycle routine: http://codepen.io/anon/pen/BKQJor ...and using some pen and paper
  12. Ninili

    Circular motion

    Thank you for the nice feedback Yes, IE behaves differently, again! IE seems to shorten translate-attributes in SVG by ommiting the y coordinate if it's value is 0, so "translate(x 0)" becomes "translate(x)". Setting the second parameter of translate to anything other than 0 solves the problem. I have updated the codepen to use "translate(-radius, 0.1)" to circumvent that not-so-funny behaviour of IE.
  13. Ninili

    Circular motion

    Actually, with SVG it is even much easier than wrapping an element. You can use the "transform" attribute of SVG to apply multiple Transforms. The new GSAP 18 can easily tween all parameters in those transform statements and also offers the cylce attribute for the stagger-functions. Imagine this is the SVG object, just 4 small black boxes placed at the center. <svg width="300" height="300"> <g transform="translate(125,125)"> <rect width="50" height="50"/> <rect width="50" height="50"/> <rect width="50" height="50"/> <rect width="50" height="50"/
  14. I just replaced the first MorphSVG plugin with the new version (0.8.1) and my morphed animations failed with the error "cannot read property 'toUpperCase' of undefined". When I debugged this in the non-minimized version, I found that the problem might be arrays of jQuery-Elements: I think this is because the jQuery element is put into an array in this line of code: (MorphSVGPlugin.js, _parseShape function, Line 847) e = isString ? TweenLite.selector(shape) : [shape] Then later, it is pulled out of this array: (MorphSVGPlugin.js, _parseShape function, Line 848) if (e && e[0]) {