multiple svg paths & tweening w/ slider

[gotaquestion]

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

[GreenSock]

It looks to me like the problem is that on the subsequent tweens, you're animating elements that aren't even visible (visibility:hidden). I suspect that you meant to animate the same two shapes to various states, thus you're targeting the wrong things. So let's say you start with #keyframe1 and you morph it to #keyframe2...remember, the actual element itself is still technically #keyframe1 (it just has the shape of #keyframe2 now). So if you then want to animate it to #keyframe3, the target (the thing you're animating) would be #keyframe1, not #keyframe2 which is just a hidden element you were using to pull shape-related data from. 

 

I also assume you wanted the two shapes to animate at the same time to both states, but you were using "+=1" as the position parameter for the subsequent ones, meaning it would just sequence them with 1 second inbetween (gap). 

 

So I think you meant for your code to look like: 

tl.to("#keyframe1", 1, {morphSVG:"#keyframe2"}, 0)
.to("#keyframe3", 1, {morphSVG:"#keyframe4"}, 0)
.add("scene2", "+=1")
.to("#keyframe3", 1, {morphSVG:"#keyframe5"}, "scene2")
.to("#keyframe1", 1, {morphSVG:"#keyframe7"}, "scene2");

I just used a label, but you could do it with absolute times if you prefer.

 

Does that help?

[gotaquestion]

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?

[GreenSock]

Right. Whenever you add() something, the default behavior is to add it to the end of the timeline. The "+=1" is just saying make it 1 second after that (creating a gap). You could just as easily use an absolute value (a number) if you prefer. Lots of flexibility. See http://greensock.com/position-parameter

 

Happy tweening!