gotaquestion
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by gotaquestion
-
-
@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.
-
I personally use Adobe Illustrator for all my vector work. If you have Adobe's Creative Suite, it's what I'd recommend. If you don't have access to that suite, I know quite a few people use Inkscape. It's free and open source.
Happy tweening.
@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.
See the Pen KagZXy by anon (@anon) on CodePen
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?
-
-
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
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
See the Pen NdNmPg by anon (@anon) on CodePen
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?
-
Hi gotaquestion
If I understand your question correctly, you want the morph animation to play and you want a secondary animation to play at the same time? If that's correct, it sounds like nesting timelines would be the way to go. You'd create a timeline for your morph and a second one with your dates and then add those to a master timeline.
Here are the basic mechanics of nested timelines added to a master:
If you use the forum search feature looking for 'nested', you'll find a lot more examples and threads. If you had a CodePen for us to review, we can probably be of more help. Please see Carl's post to learn more about creating one:
https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/
Hopefully that gets you started.
Happy tweening.
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!
See the Pen KrxoxX by gotaquestion (@gotaquestion) on CodePen
Error: <path> attribute d: Expected number, "M0,0C"
in GSAP
Posted
fyi, @greensock, I tried d="m260,187v0" but it just shrinks it finally disappearing but I need it to immediately disappear.