Jump to content
Search Community

MorphSVG Animation

farhoudz test
Moderator Tag

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.



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

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

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.
  • Create New...