Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

1 Newbie

About Raynor

  • Rank

Profile Information

  • Gender
  1. Hi! I wonder why css: {} autowrapping does not work for updateTo function. It seems a little confusing that i can use a simple shorthand syntax within tween properties, but have to print wrapped-in property like {css:{property:value}} inside updateTo function. And the other question: it seems like adding tweens to the timeline with shorthand syntax like this: timeline.to(target, 0, {property: value}); generates TweenLite tweens, that don't have updateTo method. Can I somehow create TweenMax tweens with this syntax at all or do I always have to use something like timeline.add(new Tw
  2. I tried, but in this case it doesn't even work properly from the start. With font-size 16px, according to FireBug compiled style height for menu block is 51px. If I set height to "0%", it goes tweening height from 0% to 11.6% of parent container, which is approximately 89px . I'm not sure why this happens, but suspect it's because menu block itself is one of the elements in the parent flex-container, and somehow it impedes GSAP from determining initial height correctly. If needed I can create more detailed Codepen where you could be able to observe all this side-effects. But actually I fou
  3. Hi Rodrigo! Thanks for participating. I said above, that design is made so that menu (red element) size depends on the font-size, and font-size itself is responsive. It changes when you zoom or resize browser window and therefore target element height changes too, which causes this problem with animation. I just haven't included font-scaling script for simplicity, maybe I should have done that. The script is not based on media-queries; font-size (and element height) are changed smoothly, so literally any resize event produces a little discrepancy (for now, you cannot see that on codepen, b
  4. And here's the above-mentioned method to connect extarnal css stylesheet to embedded as <object> svg file. I made it work at last) You have to place this in the head of your svg file, just above the opening <svg> tag: <?xml-stylesheet href="../css/svg-style.css" type="text/css"?> <svg... Pay attention to URL path, if's usually better to give the full path starting from root folder. Slightly other way of doing the same: <svg> <defs> <link href="../css/svg-style.css" type="text/css" rel="stylesheet" xmlns="http://www.w3.org/1999/xhtml"/> </de
  5. Well, it turned to be a challenge to properly reproduce this problem on codepen http://codepen.io/anon/pen/emWgZX I have a rather complicated situation where element's height is not set directly in CSS, but depends on content (text font-size, that is also adaptive). You can set font-size in the .box class and menu height will change automatically. Moreover, some flexbox magic is involved,and I kept it there just to give you easy way to reproduce the problem. So, to see what I mean: 1. adjust your window size so that 'flex-wrap' comes into action and you see blue boxes above each oth
  6. Thanks Jonathan! xPercent and yPercent are really cool and thay do help in some situations, but they are for translations only. And what is often needed (in my case also) is to change property (height) of the element, not just shove it somewhere off the screen (well, it might pass as a workaround, but its not the way i want it and this solution is not universal). OK, I think codepen is needed here
  7. There's the similar question that I wanted to ask, I think it will be OK to ask it here. I' trying to make GSAP animations work properly with responsive design. Let's say I have a responsive DOM element with height measured in vh or % rather then pixels. Then I tween its height with GSAP. The problem is, if I understand it right, initial CSS values get recorded only once when the tween is created. So, if I zoom page (and element's height is scaled proportionally by browser) and then restart animation again, GSAP will still tween to initial height than was recorded when page was unzoomed.
  8. Yes, local server solves the problem! Thanks!
  9. Diaco.AW, nice approach, I tried it with my project. It works with Firefox and Internet Explorer, but Chrome seems to have some kind of security problem with accessing embedded svg files. var doc = this.getSVGDocument(); //returns null Also, they say using .contentDocument is more advisable instead of .getSVGDocument(), which is deprecated, but this doesn't help with Chrome. http://stackoverflow.com/questions/22529398/getsvgdocument-returns-null-in-firefox-and-chrome http://stackoverflow.com/questions/337293/how-to-check-if-an-embedded-svg-document-is-loaded-in-an-html-page
  10. As far as I'm aware, the best way to embed external svg file in html at the moment is using <object> tag. The syntax is like following: <object type="image/svg+xml" data="images/mySVG.svg"><!--fallback--></object> "Fallback" option here allows you to specify alternative image in standard jpeg format just in case user's browser doesn't support svg. So, you can take your svg code, place it in external svg file and connect it like that, but the downside will be inability to apply CSS stylesheets or use external JS scripts, everything should be contained within thi
  11. Thanks Carl, you considerations are very helpful and for the most part they match with what I've been thinking. My usual approach to things (not only in web-development) is to build everything as flexible as possible from beginning, so in the case I want to change or elaborate something later (which often happens) I wouldn't have to do everything from scratch. From this point of view, certainly, GSAP wins the competition. Can you propose some kind of valid test to compare JQuery/CSS vs GSAP performance in custom project? Because i see that I haven't accounted for everything when I tried to do
  12. Raynor

    MInor bugs with SVG

    I see your point. The last option that you mentioned is exactly what I was talking about, it just didn't get through to me why you consider this behaviour undesirable. I think the vast majority of people prefer transform-origin in the center (maybe you can do some kind of poll on this matter?), and, if they are already using GSAP, it would be more comfortable to set any other transform-origin they want directly in the tween options, rather then in CSS. I am eager to know what other users think on this matter.
  13. 1. Well, yes, somehow I thought that "it creates a zero-duration tween but it automatically sets immediateRender:false" meant that set() method differs from .to() in the aspect that (for zero-duration) .set has 'immediateRender:false' by default and .to has 'immediateRender:true'. In that case, setting immediateRender:false explicitly would make no difference in comparison with default .set(). Should have read more carefully. 4.Oh yes, now it's getting clearer) Sorry if i'm asking obvious things, I'm still a newbie but trying to learn. So, there's no sense to compare this way. For simple clas
  14. Raynor

    MInor bugs with SVG

    Thanks for your help! Yeah, I know that Internet Explorer does not support 3D transforms for svg, nor does it support svg CSS3 animation, but in this sense GSAP stands out with its own animation engine and ability to morph CSS classes, which actually works with svg in IE! And that allows to make svg animations that are crossbrowser-compatible (for the most part). As for 3D, I think i can live knowing that if won't work in IE, while basic things like Y-rotation works nicely in FF and Chrome (anyway, it's mainly used just for decoration). So, I'd like to have it keep working in FF (I have some e
  15. Thanks Jack! So, correct me now if I am wrong: 1. set() method by default has immediateRender:true when used immediately upon creation and immediateRender:false when inserted in the timeline? I'm referring to this phrase: Because in my example it behaves differently in default case and when {immediateRender:false} is set. 2. So, in fact, total execution time is the same in any case, the difference is just that with {immediateRender:false} its 'render' part just doesn't get measured, because it happens on the next tick; 4. Jquery toggleClass method is really several times faster