Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mfewcar

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

Recommended Posts

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

Link to comment
Share on other sites

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. :)

 

  • Like 3
Link to comment
Share on other sites

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

 

  • Like 2
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

@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.

  • 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.
×