Jump to content


multiple svg paths & tweening w/ slider

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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?




See the Pen KrxoxX by gotaquestion (@gotaquestion) on CodePen

Link to comment
Share on other sites

  • Solution

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?

  • Like 2
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.