MorphSVG Animation

[farhoudz]

Hi there,

 

Actually I am trying to achieve an animation using morphSVG plugin which is a scroll down indicator, as you can see in this pen which I prepared what happens is that the two SVG rectangles morph from top to bottom and that is fine but what I exactly trying to do is that after this step I want them to morph back again from top to bottom and not from bottom to top!

 

Please advice,

 

PS. I could not add the morphSVG plugin to this pen.

 

Regards.

See the Pen mPzaOa by fzolhayat (@fzolhayat) on CodePen.

[PointC]

Hi farhoudz 

 

I think I understand your question and desired behavior. In this case, my advice would be to use the drawSVG plugin instead of the morphSVG plugin. You can then use lines instead of rectangles and control their behavior a little more easily.

 

Here's a fork of your pen with that solution:

See the Pen mPzajY by PointC (@PointC) on CodePen.

 

If I misunderstood your desired outcome, please let us know.

 

Just for future reference, you can use the Club Plugins on CodePen. There are special versions that are CodePen safe. They can be a bit tough to find sometimes though so here's a GreenSock pen which has all the links you need:

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen.

 

Hopefully that helps a bit.

 

Happy tweening.

[Carl]

if you want them always to go from top to bottom, just remove yoyo:true.

 

Also I think for this you can get away with just scaling each rectangle like
 

http://codepen.io/GreenSock/pen/Raevvo

 

TweenMax.from("#rectangle-one, #rectangle-two", 1, {scaleY:0, repeat:-1, repeatDelay:0.3})

[PointC]

Ha! Now why didn't I see the obvious solution of using scale? Much simpler. I'm always looking for any excuse to use a cool plugin. 

[Carl]

Craig, it happens to me all the time

[farhoudz]

Thank you so much guys, Actually I thought about removing yoyo from the timeline but my ideal desire about this animation is that the rectangles draw from the top and then scale down again from the top like the image I shared Here

 

I also tried to achieve this using a master timeline which manages two separate timelines but it was not a success, maybe I missed something simple here.

 

Also thanks a ton PointC for your guidance on the Codepen.

[PointC]

Thanks for the sample image - that helps me see how you want this to animate.

 

In that case, you can use Carl's scale example and turn it into a timeline like this:

var tl = new TimelineMax({ repeat:-1, repeatDelay:0.3});
tl.from("#rectangle-one, #rectangle-two", 0.6, {scaleY:0})
  .to("#rectangle-one, #rectangle-two", 0.6, {scaleY:0, transformOrigin:"50% 100%"});

See the Pen PNxoYK by PointC (@PointC) on CodePen.

 

Is that the way you wanted it?

 

Happy tweening.

[farhoudz]

Thanks a ton PointC, That is exactly what I want, I learn so much from you guys.