Jump to content
GreenSock

SergLine

Save previous shape, MorphSVG

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

Hi, everyone! I want to save prev shape of my morphsvg on the screen. So in this codepen example at the end of animation would be circle inside the elephant. Any ideas?

 

The first thing that comes to mind is to duplicate the path in svg manipulating the DOM, but i think it's ridiculous.

See the Pen RqaGeX by AlkoLINE (@AlkoLINE) on CodePen

Link to comment
Share on other sites

34 minutes ago, SergLine said:

The first thing that comes to mind is to duplicate the path in svg manipulating the DOM, but i think it's ridiculous.

 

If this is what you're trying to do, then ridiculous seems like a good option.

 

See the Pen bQpBKa by osublake (@osublake) on CodePen

 

  • Like 5
Link to comment
Share on other sites

  • Sahil changed the title to Save previous shape, MorphSVG

I don't see how you can morph shape A into shape B and keep the original shape A on screen without duplicating that path data in the SVG as Blake illustrated. Perhaps you can better explain what you would like to have happen or how GSAP would do this for you.

 

Something to note that is semi-related and not a solution to your problem is that GSAP puts a "data-original" attribute on the target of your morph so that you can easily morph back to the original shape. the data-original attribute stores the original, pre-morph, path data


 

var tl = new TimelineLite({onUpdate:updateSlider}),
    circle = document.getElementById("circle");

tl.to(circle, 1, {morphSVG:"#elephant"})
  .to(circle, 2, {morphSVG:"#circle"}, "+=1")

See the Pen bQpqaV?editors=0010 by GreenSock (@GreenSock) on CodePen

 

  • Like 5
Link to comment
Share on other sites

1 hour ago, OSUblake said:

 

If this is what you're trying to do, then ridiculous seems like a good option.

 

See the Pen bQpBKa by osublake (@osublake) on CodePen

 

Thanks! Exactly this.

 

31 minutes ago, Carl said:

I don't see how you can morph shape A into shape B and keep the original shape A on screen without duplicating that path data in the SVG as Blake illustrated. Perhaps you can better explain what you would like to have happen or how GSAP would do this for you.

 

Something to note that is semi-related and not a solution to your problem is that GSAP puts a "data-original" attribute on the target of your morph so that you can easily morph back to the original shape. the data-original attribute stores the original, pre-morph, path data


 


var tl = new TimelineLite({onUpdate:updateSlider}),
    circle = document.getElementById("circle");

tl.to(circle, 1, {morphSVG:"#elephant"})
  .to(circle, 2, {morphSVG:"#circle"}, "+=1")

See the Pen bQpqaV?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I have simple svg picture which consists of few layers (paths) so i want to draw this picture. One layer morph to another, stays on screen and so on. I think it will be awesome using Greensock MorphSVG plugin. If I succeed i will share a link here) Thank you for explanation about data original attr btw.

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