Alle Posted August 23, 2020 Share Posted August 23, 2020 Hi, everybody. I bought this beautiful library 2 days ago, so I'm totally new, and after reading a bit of documentation and a good dose of "depression" 😂 I have a question. I also searched the Forum but I don't know exactly what to look for, so excuse me if I repeat something that already exists.  I created a simple rectangle in illustrator. Now I try to animate it from the bottom to the top, keeping its structure. I don't understand if I have to use DrawSVGPlugin or MorphSVGPlugin or neither of these because I'm getting unnecessarily complicated.  I've inserted a screenshot to show exactly what I'm trying to do.  I tried to do it in this way but I really think it's wrong or is some piece missing? Original (Start)  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="83.7px" height="94.5px" viewBox="0 0 83.7 94.5" enable-background="new 0 0 83.7 94.5" xml:space="preserve"> <polyline id="A-left_1_" fill="#333333" points="0,0.3 3.3,0 25.5,0 24.3,0.3 0,0.3 "/> </svg> Animate (Finish) tl.to("#A-left_1_",1,{attr:{points:'23.3,0 45.5,0 24.3,94.5 0,94.5'}});  The result, as you can see in the gif, is that it starts from the top and goes down and also does not stretch as I expected.  Can you give me some indication to follow "conceptually" or some link to the documentation to recreate something like this? I'm sure I'm going the wrong way. Thank you very much. Have a nice day. Link to comment Share on other sites More sharing options...
Richard1604 Posted August 23, 2020 Share Posted August 23, 2020 Hello alle, im sure that you will get a lot of help here and come to like using your new tool set. im just a newbie but looking at your post I think that you ought to check out MorphSVGPlugin and it’s ability to take an SVG and transform to a new set of points using Gsap.to() there is some good explanation and lots of examples In the documentation where you can take an svg and morph to a final shape. obviously you can also approach it from the opposite direction using gsap.from()  1 1 Link to comment Share on other sites More sharing options...
mikel Posted August 23, 2020 Share Posted August 23, 2020 Hey @Alle,  Welcome to the GreenSock Forum as ShockinglyGreen member!  You have some options to realize it. Here is a simple way - like a mask and tweening the progress.  See the Pen QWNdGEE?editors=1010 by mikeK (@mikeK) on CodePen  Happy tweening ... Mikel 3 1 Link to comment Share on other sites More sharing options...
Alle Posted August 23, 2020 Author Share Posted August 23, 2020 Here I am again. (Richard and Mike) Thanks for the super quick response. I've been trying to do some experiments. The first morphology, but I still don't quite understand how it works and I can't get complete control of the object. I don't understand how to start it from the bottom, obviously it must have "total discontrol" 😂😂  The second one was in fact just making a mask, but even in this case I was not super sure of the idea and also I was not able (I still have too many gaps in 48 hours you can't learn, I guess 😂). Now with this example I will try to solve my first experiment. Thank you for your support. I will surely come back with some questions Have a nice day Alessandro  Link to comment Share on other sites More sharing options...
PointC Posted August 23, 2020 Share Posted August 23, 2020 If I understand the desired outcome correctly, I'd think a skewed rectangle and scaleY animation would work well. Â See the Pen 441e6a9cab01b783ed98fcf36f20fcf9 by PointC (@PointC) on CodePen 6 1 Link to comment Share on other sites More sharing options...
Richard1604 Posted August 23, 2020 Share Posted August 23, 2020 The fabulous thing about this forum is that there are so many different and varied responses to a question. I have only been here for a few weeks but I now have a database of over a hundred different examples to draw on! 3 Link to comment Share on other sites More sharing options...
Alle Posted August 23, 2020 Author Share Posted August 23, 2020 24 minutes ago, PointC said: If I understand the desired outcome correctly, I'd think a skewed rectangle and scaleY animation would work well. Â Â Â Yes, sir! Thank you so much for showing me the way. I'm really grateful, by all means I'm reading all the documentation to get a global idea. Thank you very much again Alessandro 2 Link to comment Share on other sites More sharing options...
Alle Posted August 23, 2020 Author Share Posted August 23, 2020 I want to share my "first and simple animation" but I'm happy to see the first step. All this thanks to this Forum for showing me the way. Thanks again. (Richard1604, mikel, PointC, )  2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now