tweenMax + flubberjs or other SVG Morph library

[Haisan]

I have this example of popmotion using flubber.

But I could not make the flubber work with tweenMax.

I do not understand how to merge the 2 libraries. I do not know if it is possible either. But I wanted to do with tweenMax, because my goal is to focus on the greensock tools.

Or if they know of another option I can use while I can not acquire SVG Morph.

I know we have the SVG Morph plugins, however at the moment I can not pay, because in my country this value of 99 dollars is 4x bigger.

 

Sorry for my google english. Thanks

See the Pen RYeMEm by Haisan (@Haisan) on CodePen

[OSUblake]

2 hours ago, Haisan said:

I know we have the SVG Morph plugins, however at the moment I can not pay, because in my country this value of 99 dollars is 4x bigger.

 

What country?

 

Interesting library. It looks like it works differently than MorphSVG, drawing a bunch of tiny line segments instead of Beziers. 

 

You can animate some property on an object from 0 to 1 and fill in the rest.

 

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

 

 

 

 

[Haisan]

@OSUblake Thank you very much. 

 

I live in Brazil. Sorry for the basic questions. I worked 4 years developing simple websites and I ended up getting very comfortable where I was. Now I see that I have deprived myself of much knowledge. It's been a month since I quit my job and now I want to learn how to do more sophisticated things and open my own business, because here in the region all companies only make basic websites.

 

I also really enjoyed this library. But I found it a bit heavy.

 

There's this too, if I did not get something free from tweenMax:

See the Pen YGayLg by thednp (@thednp) on CodePen

 

I always see you helping everyone here. Again, thank you very much for your work.

[Haisan]

26 minutes ago, OSUblake said:

You can animate some property on an object from 0 to 1 and fill in the rest.

 

I just did not understand this part of the Object. This "t" represents what? Sorry if I'm taking you too long.

[OSUblake]

"t" can be named whatever you want. It represent the progress of the animation, so it can be thought of going from 0% to 100%. 

 

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

 

 

From Flubber's docs.

 

var interpolator = flubber.interpolate(triangle, octagon);

interpolator(0); // returns an SVG triangle path string
interpolator(0.5); // returns something halfway between the triangle and the octagon
interpolator(1); // returns an SVG octagon path string

 

So you pass that progress value into flubber, and will figure out where the points on the shape should be. 

 

 

 

[Haisan]

Now it all makes sense hahahah. Perfect, now I get it. Thank you very much.