gotaquestion

fyi, @greensock, I tried d="m260,187v0" but it just shrinks it finally disappearing but I need it to immediately disappear.

@pointc, I'm morphing to empty path because in that scene div is used again later in the timeline to show another animation. However, I need the first animation to disappear and then later in time display a completely different morph in that div. (fyi, I have multiple div's in the same scene over time). I tried the autoalpha but it morphed the two together. @OSUblake, I tried your idea d="m0,0v0" but that just morphed the polygon from the 0,0 to its position.

the codepen works exactly the way I want. the animation disappears after it is done. However, I do get some errors in the console. rror: <path> attribute d: Unexpected end of attribute. Expected number Error: <path> attribute d: Expected number, "M0,0C" so I'm wondering what the correct way to do it.

@Pointc, thanks for telling me about inkscape! I've fixed my path problems and now the morph works way better! but is it now possible to force morphsvg not to cross lines? Take a look at the new codepen below with my new paths. http://codepen.io/anon/pen/KagZXy notice how the loop at the bottom tip crosses over itself during the morph? so I'm wondering if there is a command that could prevent behavior from occurring?

wow, I made that change and I see it! so strange. I inherited these paths and I don't work with vector files but I seems I'm going to have to learn. What vector program would you recommend in this situation?

Take a look at this codepen http://codepen.io/anon/pen/NdNmPg It morphs the two shapes by flipping and growing one of the lines when all it needs to do is tween outward. Is there something wrong with my svg paths?

in this example, I have two polygons that morph over time. and morphsvg works great when each individual polygon path is defined in the svg Here is a working example that uses 4 paths in the svg http://codepen.io/anon/pen/RKadzP However, I have many many years of data to deal with, and I'd to save time and combine the individual polygon paths per year, so I only have one div per year to deal with. but can morphsvg morph separate polygons defined in one path? Here is an example of the same paths above but combined per year http://codepen.io/anon/pen/NdNmPg but nothing shows up.

perfect! thanks!

@pointc, I haven't seen that! But now that I have... I modified the nested example you showed me and added the textplugin and a slider. Is it possible to make the letters of the text not morph into the next month name? Is it possible to force the text timeline to finish when the box animation finishes with out assigning a manually value (.5 in this example) for each text animation duration? http://codepen.io/anon/pen/PWNzaN

Thanks for the nesting idea. I'm going to investigate further. But right now in my mind, that second animation is not really a tween animation. The "second animation" needs to be Text, like "March 2016, April 2016, etc" that is associated with the first animation tween. Getting the currentLabel and then the next one and or a slider value seems to be closer to the solution I need.

I have an animation that shows outlines of areas for few dates over years. As I move the slider I want to display an estimated date for each of the tweens. Meaning, if I have shape data for March 2010 and it's tweening to shape data September 2010 then as I move the slider I want to display the dates like March, April, May, June, July, August, September to show up as I slide. It seems like labels might be the answer but I don't know how to attached to each tween. Or maybe it's with the time property? ideas? Here is my code: var tl = new TimelineMax({onUpdate:updateSlider}); tl.to("#March_2010_small", 1, {morphSVG:"#September_2010_small"}, 0) .to("#March_2010_large", 1, {morphSVG:"#September_2010_large"}, 0) .add("scene2") .to("#March_2010_small", 1, {morphSVG:"#September_2011_small"}, "scene2") .to("#March_2010_large", 1, {morphSVG:"#September_2011_large"}, "scene2"); $("#slider").slider({ range: false, min: 0, max: 1, step:.001, slide: function ( event, ui ) { tl.progress( ui.value ).pause(); }, stop: function () { tl.play(); } }); function updateSlider() { $("#slider").slider("value", tl.progress()); $("#date").text(tl.time()); }

thank you! I also tried .add("scene2") without the "+=1" and it still looked like it worked. is that because it just adds the scene to the last without the 1 second between?

morphsvg is amazing... I'm trying to get my code to do the following. I will eventually have 40 keyframes/paths inside my svg and I need to tween and use a slider to go through the animation. right now in my codepen example I have 8 keyframes. 4 pairs. the first two pairs are added at time zero and work well. but then the next ones don't fire off. what am I doing wrong? Thanks!