Jump to content
GreenSock

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

Which plugin to use to do this?

Recommended Posts

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.

Schermata 2020-08-23 alle 12.04.58.png

test.gif

Link to post
Share on other sites

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() 

 

  • Like 1
  • Thanks 1
Link to post
Share on other sites

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

  • Like 3
  • Thanks 1
Link to post
Share on other sites

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
 

testMorph.gif

Link to post
Share on other sites

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!

  • Like 3
Link to post
Share on other sites
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

  • Like 2
Link to post
Share on other sites

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, mikelPointC, )

 

FirstAnimation.gif

  • Like 2
Link to post
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.

×