Jump to content


Animation - Tree growing out of ground

Recommended Posts

Hi there,

I'm trying to get a proof of concept down for a site that I am building.


I have an SVG tree that is a path, I'm wondering if it's possible (or how I would go about it) so the tree would appear to grow out of the ground. So the main trunk would appear from the bottom and grow upwards, and then the smaller branches would branch out.


I have worked with stroke offset and stroke dash array before so that a path looks like its drawing itself, but not with a solid path. I have also seen this fantastic animation from @Carl however, this generates the leaves and branches using js instead of using an existing path.


Any help would be much appreciated, thank you for your time!


See the Pen yLerMWQ by ainsleyclark (@ainsleyclark) on CodePen

Link to comment
Share on other sites

Any ideas? 😃


i don’t know how to approach this, or if I should cut the branches up in illustrator before animating them?

Or better still if there is a way to manipulate the path do I can have it draw itself?


thanks again.

Link to comment
Share on other sites

You could make a few copies of the tree and move the nodes inwards to the different growth stages you require and then copy all those paths into an array and animate with morphSVG plugin which would be the best bet. It's for club greensock members tho. Otherwise you could animate with the CSSPlugin, starting from the smallest svg

gsap.to('.firstSVG', {attr: {path: [arrayContainingPaths]}})

which is a lot less efficient.

  • Like 2
Link to comment
Share on other sites

As with all SVG animation, this is gonna come down to proper asset prep. You have a few options. You could certainly take the approach @ebinabo suggests above and push the branch points back to the trunk and then morph. If you're using Adobe Illustrator, you may find it a bit fussy with that approach and could eliminate some of your points.  I wrote about that here.



Another approach would be to create a series of masks and use DrawSVG to draw the stroke and reveal the branches. That could be tricky since the width of the branches and stems is not consistent. One mask may reveal something that shouldn't be seen yet because the stroke is too wide. 


Another approach would be a clip-path for each branch. If you're animating quickly enough, a simple scaleX animation on the clip-path could reveal each branch. 


You can also cut the tree into a whole bunch of pieces and give each piece its own mask or clip-path. That'll be a lot more work, but would probably yield the best results. If you need a refresher on masks and clip-paths, you can read more on my training blog.



Good luck.


  • Like 4
Link to comment
Share on other sites

Thank you @PointC and @ebinabo for your replies!

I will give the mask/clip-path route ago. Im presuming I can set up each branch with its own mask in Illustrator somehow?

Many thanks!

Link to comment
Share on other sites

If you're using masks and DrawSVG, I'd draw an open path over each branch keeping the stroke-width just wide enough to cover the artwork. If you'll be using a clipPath on larger sections, you won't have to be as precise. Just a rectangle covering the entire branch should work. Good luck. :) 


  • Like 2
Link to comment
Share on other sites

  • 1 month later...

Hey @PointC @ebinabo


Thank you for your advice on this. 


A friend kindly chopped up all of the branches I needed for the tree. 

It works quite well with a <rect> being used as a clip-path however ideally it would be amazing for each branch to use its actual path as a clip path if that makes sense? 


I have just used the one branch to demo for the moment.

I don't know if there is a less time consuming way of creating 50 or 60 rectangles to use as a path, each with there own transform-origin?

Unfortunately I don't have the drawSVG plugin.

See the Pen yLerMWQ?editors=1111 by ainsleyclark (@ainsleyclark) on CodePen


Many thanks for your help again.

Link to comment
Share on other sites

Well, you could always join Club GreenSock and get the DrawSVG plugin. ;)


If you have that many branches, I'd make a loop and create a rectangle based on the .getBBox() size of the branch paths. Then use them as clip-paths for the branches. The trick will be in the grouping as the branches on the right will need their rectangle scaled left to right and vice versa on the other side. So the animations of the rectangles will be a bit different. See what I mean? You may also have some offshoots that are supposed to grow from up → down or down → up. I don't know for sure since I haven't seen the artwork.


Bottom line: You may need to group the branches according to how you'd like them to grow.


Does that make sense? Happy tweening. :)


  • Like 3
Link to comment
Share on other sites

Thank you so much for your help @PointC


The loop and the rectangle really helped me out and saved me a lot of time, you can see it here: https://oaktuition.ainsleyclark.com/

I added data attributes to each path to determine if it was big, medium or small, so I knew where to position it in the timeline (it was time consuming but worth it as you said).

Thank you so much!

  • Like 3
Link to comment
Share on other sites

That really turned out well. Great job! Thanks for sharing. :)


  • Like 1
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.