Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

9 Newbie

About mattsrinc

  • Rank

Recent Profile Visitors

2,104 profile views
  1. I know this is a late comment to this topic and I would give my hand for defending GSAP animation features when comparing to other libraries but ... whenever there is a built-in feature of a main given javascript library for a solution I try to use it and not adding additional libraries when not needed. So instead of calling GSAP you can play with transition and delay parameters in D3.js, essentially giving you the sequenced stagger animation like GSAP. I don't have time to rework your example (doing at least 2 D3.js charts/month per clients) yet this should guide you to pure D3.js approa
  2. I just like GreenSock because it has everything I need for web animations in a clear, cross-browser and performant API.
  3. As PointC said - it's a waste of resources (read browser's memory) to create new timeline every time you call a function. Just create your timelines *calling* the function once and then control each timeline calling its functions, not calling a timeline creation function again. Modified CodePen: https://codepen.io/mattsrinc/pen/ZqYeRv Do note that you can change the z-order of objects in DOM very easy but SVG (if you will use it) doesn't have third dimension and an object that resides in a file the last will get drawn above all other. Usually this is solved by r
  4. Have you resolved this? The solution is quite simple. You are already tracking mouse coordinates so just setting transformOrigin attribute in the mouseOut handler to be the center of the circle probably does what you wish. I do get strange resizing circle effect that other might fix though (Firefox 61.0.2 on Mac OS).
  5. Hi, supporting the new forum (I might post an offer to work, too). Regarding this part of the posting guidelines for freelancers: GreenSock is not liable for anything that happens before, after, or during the life of your project. Please don’t contact us for arbitration help. It’s fine if you want to simply report abuse. I would change the second statement to: Please don’t contact us for arbitration help - several freelancing portals offer so-called "dispute resolution services" that are recommended for potential arbitration. (with n
  6. Damn, you're right as always. I forgot the transformOrigin: "center" part. Many thanks, you saved my day!
  7. Thanks but If that would work I would not even ask here. Offsets removed, transform origin set to 50% 50% (and arc based path3 added): So the problem is (probably only) in getting the moving object "centered"? That's what I'm seeking e.g. how to move any (compound) path or a group on a path, centered on it and auto rotate as well. ADDED: But it might work. I've commented out TweenLite.set("#car1", {xPercent:-50, yPercent:-50}); and if all I need to do is extend the rectangle for few pixels more that's a pretty acceptable solution, thanks!
  8. Hi, fellow GreenSock (forum) members. I'm stuck with animating an object over path, more like generally how to center say rectangle or any path to move smoothly on a path with autorotating. The Codepen pen is a part from what I would like to do but can't center the green "car" e.g. so that its center (midpoint X and Y or centroid if you wish) would move on the path. This year I have created complex animation of a cube moving along the "infinite" path with calculating shadows per rotation angle - with callback function - yet cannot do this simple animation well. Gray pat
  9. On the topic, how likely is that GreenSock would be able to animate this simulation smoothly: http://david.li/waves/ It uses OpenGL (WebGL) so real 3D animation as a scripting solution, looks very similar to Three.js (library and) code. It's still remarkable every time I watch it again. Is there similar GreenSock animation anywhere?
  10. Thanks Diaco for the onUpdate example. It has solved my limiting DIV scale setting on mousewheel event as well. For the community benefit - mousewheel up e.g. zoom in event won't trigger or triggers as mousewheel down (zoom out) event in Chrome and Safari on Mac. So you end up with zooming out only on those browsers (August 2016). This jQuery plugin solves the issue completely: https://cdnjs.com/libraries/jquery-mousewheel with a mousewheel event on the div element (see Diaco's first CodePen example) usable like this: $("#proxytrigger").on('mousewheel DOMMouseScroll', functio
  11. I am just jumping here with some experience having a similar issue - Chrome was not respecting some of my direct transformations so I had to use css:{}. That solves Chrome problems but (it appears that) slows down Firefox. So test, test and test again. If you don't need CSS repositioning - avoid it. And we'll all have to wait for fixed version of Firefox that should match SVG animations in Chrome and Safari.
  12. Thanks again. Luckily they said they will accept current script with cosmetic changes, not GreenSock related (we knew that, right? ). I'll post another comment when Firefox (team) fixes that. On to new TweenLite and TimeLine script. With an owl!
  13. Thanks, Carl, encouraging as always. The problem is zooming in to double and triple scale: that you can try by changing scale in your pen to 2.0 (or 3.0). I guess we have to resolve this to Firefox bug. Even if I remove all those texts, lines and circles blurring the speed is the same so animating the whole chart is slow in FF. What about the idea of animating to viewbox (attribute of SVG tag) changed values etc?
  14. No clue? Anybody? Is zooming few tens of SVG paths really so problematic in Firefox?
  15. Hi, I've been working long on the chart for the client yet I cannot solve the slow Firefox zoom problem. Here's the limited version of the SVG chart that exibits the problem: http://codepen.io/mattsrinc/pen/mJMRMX Now please try to click on the light blue areas (of the cow drawing shown). The neck and the part at the top are set to be zoomed (scale-d) two times while the bottom parts are set to zoom to three times larger. The (zoom) animation is slow and unusable on Firefox (when other parts are added, even in this limited version the slowness is noticable). Safari and Google C