Animation - Tree growing out of ground

[ainsley_clark 15 Likes (Newbie)]

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

[ainsley_clark 15 Likes (Newbie)]

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.

[ebinabo 9 Likes (Newbie)]

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.

[PointC 14,185 Likes (Superhero)]

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.

https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/

 

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.

https://www.motiontricks.com/svg-masks-and-clippaths/

 

Good luck.

[ainsley_clark 15 Likes (Newbie)]

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!

[PointC 14,185 Likes (Superhero)]

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.  

 

[ainsley_clark 15 Likes (Newbie)]

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.

[PointC 14,185 Likes (Superhero)]

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.

 

[ainsley_clark 15 Likes (Newbie)]

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!

[PointC 14,185 Likes (Superhero)]

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

 

[Visual-Q 978 Likes (Leader)]

Nice... very well done.