Jump to content
GreenSock

farhoudz

MorphSVG Animation

Go to solution Solved by PointC,

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

  • Like 1
Link to comment
Share on other sites

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.

:)

  • Like 3
Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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.  :-D

  • Like 2
Link to comment
Share on other sites

Craig, it happens to me all the time :)

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • Solution

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.

:)

  • Like 3
Link to comment
Share on other sites

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

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