mikesol

I definitely see where you're coming from - my biggest question is just one of API stability, but if the _gsTransform interface will hang around, I'm all for it!

Wow, cool stuff! To what extent is this a public API? It seems like it is more like exposing an implementation. It'd be great if GSAP could encapsulate this in a getter method and make that part of the public API. Is there a place I can file a ticket?

That sounds like a great idea! I've hacked it another way by rewinding all the tweens at http://mikesolomon.org/rondpoint/dist/#/, but what you're talking about would work much better. Are there convient getter methods in gsap? I know that a lot of the properties can be accessed directly from the CSS, but stuff like scaleX or autoAlpha require extra translations of information, so it'd be really convenient to do something like: timeline.get(['x','y','autoAlpha']) and have it yield an associative array like: { x:0, y:0, autoAlpha:0.1 } is something like this doable? I couldn't find it reading the docs...

Thanks for the quick reply! This is almost what I'm looking for - the goal is to do something like tweenTo with two extra caveats : It should not retrace the timeline but rather do a smooth interpolation from the current value to the seek value. It should do this interpolation for a duration that I set instead of following the duration of the timeline. Is this swingable with GSAP?

Hey all, I'm trying to make an interactive musical example where using absolute coordinate in SVGs proved to be too cumbersome so I've switched to a TimelineLite where I can use only relative coordinates but have the possibility to rewind to certain states, obviating the need for absolute coordinates. This works fine, but it would be nice to be able to animate seeks to certain positions in the timeline. In the attached codepen, seek simply resets the timeline to the indicated point (0), but it would be nice to simultaneously move all of the objects to this point without having them abruptly go there or traverse the timeline backwards. Any ideas how to accomplish this? Thanks! ~Mike

Thanks for the suggestion! Unfortunately, while in your example this works, it does not work in the example I posted earlier. I've modified my codepen to show the problem - I can get the music to scrunch up at the origin, but not to fan out to its original position: http://codepen.io/mikesol/pen/avjOqy All this could be solved with TimelineMax by just resetting to the beginning of the timeline. However, then a new problem crops up with interpolation in that I can't figure out how to interpolate between two non-sequential points on a timeline. I will post a different thread for that.

Hey all, Using a technique described in Animation Distorts Initial Scale and Values, my goal is to take all of the elements in an SVG and move them to the same X and Y position. I would have thought that lines 19-23 in the JavaScript in the codepen do this, but they wind up scattering the elements all over the place. Inspecting the DOM in my real-life example, I see that all of these have a property "data-svg-origin" set that I am not setting myself. This property is different for a lot of the elements and I believe that this is what is causing the the discrepancy in the x and y positions. In my codepen, I've commented out relative transforms (+=100) of x and y. These work, but it is not what I want to do - I'd like to move everything to the same absolute position. Does anyone know how to accomplish this? Thanks! ~Mike

Hey all! In the attached codepen, my tween causes the element in question (a red treble clef) to become huge before moving. Is there a way to stop it from jumping size and positions like that? As you can see in the codepen: setTimeout(function() { var clef = document.getElementById('Clef_0_1@1'); TweenMax.to(clef, 10, { x: 100, y: 100 }); }, 1000); The JavaScript only specifies a translation, but I get the sense that the original position is shifted first and it's clear that the original scale is obliterated. Many thanks for your help!

Thanks for the helpful reply - I will proceed in this direction!

Hey forum! I'm looking for strategies to animate between different SVGs with the same IDs for elements. For example, if I have: <svg id="svg1"> <circle id="foo" cx="50" cy="50" r="40" stroke="black" stroke-width="3"fill="red" /> <rect id="bar" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /> </svg> and <svg id="svg2"> <circle id="foo" cx="100" cy="20" r="70" stroke="black" stroke-width="3"fill="red" /> <rect id="bar" width="25" height="1000" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /> </svg> is there a way that GSAP can recognize similar elements in the two SVGs and animate between them? I ask this because I am working with a piece of software (GNU LilyPond) that can create SVGs of musical scores with the elements id'd and I'd like to animate between similar scores that have just a few changes (for example, notes of different sizes, some notes higher, some lower, etc.). Otherwise I can write a parser that harvests this data from the SVGs and pumps them into GSAP's JavaScript API, but this is a bit of a pain.