Trying to figure out how to switch SVG to another SVG as part of a Timeline.

[mfewcar 0 Likes (Newbie)]

I'm kind of stuck on how to approach this problem. I have a timeline that is showing a primary SVG image, I'm trying to find a way to swap the SVG for another as a part of the timeline, and then continue the animation. 

See the Pen mdejReV?editors=1100 by manuelwebdev (@manuelwebdev) on CodePen

[PointC 14,429 Likes (Superhero)]

I'm not sure I follow the question. Do you want to show a completely different SVG than the one in your demo? Or did you mean certain pieces of the main SVG?

 

Without more details my best guess would be that you'd want to tween or set() the autoAlpha of the SVGs or child elements when you want to swap them. Just a guess though.

 

[mikel 4,775 Likes (Superhero)]

Hey @mfewcar,

 

Welcome to the GreenSock Forum.

 

You could use the viewBox to animate/zoom to certain areas.

Check out the examples from @PointC here.

 

See the Pen OMabPa?editors=1010 by PointC (@PointC) on CodePen

 

An upgrade of this code to GSAP 3 should be easy.

 

Happy tweening ...

Mikel

 

[mfewcar 0 Likes (Newbie)]

14 hours ago, PointC said:

I'm not sure I follow the question. Do you want to show a completely different SVG than the one in your demo? Or did you mean certain pieces of the main SVG?

 

Without more details my best guess would be that you'd want to tween or set() the autoAlpha of the SVGs or child elements when you want to swap them. Just a guess though.

 

So yes, I have two SVGs that I'm working with, and I want to show a completely different SVG. 

[ZachSaucier 7,152 Likes (Superhero)]

@mfewcar You've got a lot of code in your demo. We're happy to help, but it's a lot easier for us to help if you make a minimal version of what you're trying to accomplish. Maybe you make two SVGs, one with a rectangle and one with a circle and then illustrate what issue(s) you're running into with that? A clear description of what you're having trouble with also helps us help you.