essentialtoils

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!

Said too early... It seems to progressively increase the scale when hovered quickly. What am I missing?

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?

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?

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!

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?

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...

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;"></use> Have to use Symbols to minimize file size. Please see updated CodePen: http://codepen.io/IGaMbLeRI/pen/BLoGEG The mouseover for some reason rotates the element, and moving the cursor out doesn't return it to the original scale.

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 already scaled and rotated (some 180 degrees that for some reason turn upside down with absolute scaling) elements, so using absolute scale is not feasible. So how would I go about "storing" the initial scale value to tween down to it on "mouseleave", possibly? Hope I'm clear in explaining what is needed.

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!

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 < i) maxI = i; setTimeout(function(){ $(child).css({ "display":"inline" }); }, d + (i*d)); }); Due to the top-to-bottom processing of the SVG export by Adobe Illustrator, I'm having to iterate over the children of the <g> in reverse order because I need to animate in that order, and I'm too lazy to reprocess the SVG manually, maybe someone will find this useful! Anyhow, it works all good and fine, however, this approach seems to run mostly on the CPU, while it seems to me that GSAP functions are mostly GPU heavy. Initially, I combined the MorphSVGPlugin's ability to animate along path with this "revealing" tactics with Linear.easeNone easing on the Tween, and it worked perfectly fine. HOWEVER! After loading up my GPU with screen recording software, I noticed that the 2 animations are COMPLETELY out of sync. Can anyone think of a way to incorporate the point-revealing method into a Timeline perhaps to run the 2 animations completely in sync? Here's the CodePen: http://codepen.io/IGaMbLeRI/pen/bwdkXP

Works like a charm! Thanks a bunch!

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!

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 used fill="blue" just to demonstrate the position of the line) - the starting point is supposed to be the top "corner", however, it is an invisible "looped" line. 2. The animation kicks in, and the object is instantly positioned somewhere else! This is the actual problem for me right now. 3. The object is animated along a correct curve! This makes me think that MorphSVGPlugin.pathDataToBezier method is working as intended and provides x-y array of movement points. However, TweenMax.to() method seems to disturb the intended starting point for the animation, I really can't put a finger on it right now. There is very little control I have over the artwork, which has been designed in AI and exported to SVG format. Hoping to find the resolution to this problem as soon as possible.