Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

4 Newbie

About essentialtoils

  • Rank

Recent Profile Visitors

824 profile views
  1. Sorry, I'm still getting to grips with the simplicity and robustness of the engine It's just when something is THAT simple to use, I sometimes have a hard time seeing the solution, if you know what I mean. Thank you for your time and effort to help nonetheless! Anyhow, your answer works perfectly. It's totally the easing! Thanks again!
  2. Said too early... It seems to progressively increase the scale when hovered quickly. What am I missing?
  3. Right. So I thought to take a slightly different approach: var Hoverable = $("#to-be-scaled"); Hoverable.hover(function(){ this.CurrentAnimation = new TimelineLite(); this.CurrentAnimation.to(this, 0.5, {"scale":"+=0.1"}); }, function(){ this.CurrentAnimation.pause().reverse(); }); Does seem to be a bit "sluggish", but seems to work perfectly otherwise. Anyone has better suggestions?
  4. Thank you for a thorough explanation. As I have gathered, yes, GSAP is doing exactly what it should. However, how would I go about storing the original transformation (prior to any tweens) to then return to that transformation after scaling up? So instead of returning to "scale":1, I would like to return to "scaleX":originalScaleX and "scaleY":originalScaleY. Is parsing the attribute property "transform" to get matrix values really the best way?
  5. Having problems scaling an element up and then back down to original value, if there is transform="matrix()" applied. The particular case of <use> element with transformation applied loses the transformation in the process of animation. Is there a way to respect original scale values in order to programmatically create this hover effect without the objects flipping? Thanks in advance!
  6. Wow, speechless. Sorry to have you look for typos... Indeed, this fixes everything. Thank you very much! Must be getting tired. This was not worth a new thread, was it?
  7. Experiencing the same problem as stephenburgess8. Here is the CodePen: http://codepen.io/IGaMbLeRI/pen/LRGpqW As you can see - same console message "invalid morph tween value: #menu-ham"... MorphSVGPlugin is attached, and TweenMax also. Quite strange...
  8. As mentioned, over half of the elements I need to work with are pre-positioned, so something like this: <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#obj1234" width="142.4" height="72.1" x="-71.2" y="-36" transform="matrix(1 0 0 -1 2176.0781 647.8819)" overflow="visible" style="opacity: 1;"></use> and like this: <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#obj12345" width="85.1" height="151.2" id="unkniwn1-2" x="-42.5" y="-75.6" transform="matrix(0.9716 0.2366 0.2366 -0.9716 1576.377 776.5244)" overflow="visible" style="opacity: 1;"></us
  9. Having a slight problem with relative scale. Check CodePen: http://codepen.io/IGaMbLeRI/pen/BLoGEG The problem is that, I want to make the element grow on mouse hover and return to initial size when the cursor leaves the element, however, it's very very glitchy in this current "implementation" (in the CodePen). Try to quickly run mouse cursor over the circle - it will quickly deflate to almost nothing. Obviously, this behaviour is due to "mouseleave" tween overriding "mouseover" tween midanimation and takes in the current scale midanimation. Unforunately, I'm having to work with a
  10. Ha! Wow... Amazing how simple it is: var d = 0.25; // delay between each dash (s) var maxI = 0; var tl = new TimelineLite({repeat:0}); $($("svg g#line").children().get().reverse()).each(function(i, child){ tl.to($(child), d, {"opacity":1}); }); And it seems to have fixed my synchronization problems Great product, guys!
  11. I am not sure if Answered Posts still get attention, but having the need to animate a dashed line, I thought I'd ask in the most relevant thread. Currently, I am resorting to having to split each dashed line in AI and then produce a <g> of <paths> instead of a single <path>. After that, I simply hide each point <path> with CSS: svg g#line > path { display:none; } And then reveal them one by one with a time function: var d = 130; // delay between each dash (ms) var maxI = 0; $($("svg g#line").children().get().reverse()).each(function(i, child){ if (maxI
  12. Thanks for your quick response! It does fix the #orange, indeed. I have about 10 objects like that which I need to animate, is there a programmatic way to achieving the result? I mean, what's the reason for needing the offsetX and offsetY, and why "-60" in particular here? Thanks in advance!
  13. I am currently working on a project where an animation along the line is implemented, i.e. a chosen SVG element (in this particular case a <g> ) is moved along a <path>. Previously, I have implemented this using Snap.SVG and it worked fine, however, having to also do some "morphing" on the elements, I decided to give MorphSVGPlugin a go to save resources. However, so far it has not been a smooth ride... Stepping through the code, I observe the following: 1. The object is rendered in a starting position (the correct starting position). 2. The line path is rendered (I u