Skip to main content
J
janessat15022340
New Participant
January 17, 2018
Answered

Help with trim paths?

  • January 17, 2018
  • 1 reply
  • 4135 views

Hello Everyone, I have been struggling with an issue for almost a week! I have a complex line art image in Illustrator That I would like to animate with growing strokes in after effects and put the responsive animation on a website (i just want it to animate once the user reaches it on the webpage. I am using the BodyMovin Extension to export my SVGs but i am running into big issues.

Here was my process:

First I rasterized the image with a transparent background  in illustrator

imported to After effects

right clicked on my comp and selected to vectors into shapes option

I did my animations on my paths using trim paths

everything looks how I would like it to within AE (pictured in Screenshot midway through completed animated sequence)

I put when I view the animation demo in a browser, it has some extra shapes added in there.

I am honestly not sure if I am even doing this right since I am very new to this so

my help would be much appreciated PLEASE!

This topic has been closed for replies.
Correct answer Rick Gerard

I do not produce SVG animations, but I do a lot of complex animations in AE and the best suggestion that I can give you is to simplify. If you are drawing on hundreds of lines in a couple of seconds you can get away with revealing dozens of them at a time and nobody will know the difference. I recently did a project where detailed pen and ink drawings were drawn on the screen, colorized and then turned into photographs that turned into a movie. A hero frame from the video was sent to an Illustrator artist who created the beautiful and amazingly detailed vector drawings. I had her group key elements on to separate layers so that when I imported the AI file as a comp there were only about 20 layers. Some of them had as few as 10 lines on them, other layers had hundreds of lines and shapes. I simply animated some masks on the layers with many components and used trim paths on a half dozen or so layers with 10 or fewer lines. The entire transition took 40 frames and the client was extremely happy and said to me "How did you ever animate those thousands of lines in a day?"

I would try that kind of approach with your drawing. You could use the original Illustrator art as one layer, then use a very wide shape path to reveal many of the lines at the same time. I'm not sure how the SVG conversion software works so that might be a dead end, but simplify is definitely not a bad suggestion.

Your screenshots are a little better but I still cannot see modified properties of the layers. Just pick one typical layer, press the U key twice and show me what you are doing with that layer. Maybe I can help.

I just thought of another option. You can change the stroke color to a gradient along the path in Illustrator then use that path as the source for gradient wipe. In AE you could convert the vector layer to a shape layer. The gradient would not come through, you'll just get a gray line and the AI layer will get turned off. Then you can apply gradient wipe and use the original AI layer as the source. This would allow you to break your drawing up into 10 or 15 sections and then animate them with just a couple of keyframes. I don't know if the SVG plug-in will work with gradient wipe, but it would certainly simplify things.

From this artwork:

1 reply

R
Rick Gerard
Braniac
January 17, 2018

rasterized in Illustrator??? Should not be part of the process. Everything should be vectors.

All shape layers and shapes should be stroke only. No fills. Go through and delete any fills you see.

Make sure that all of your trim paths animations are simple 2 keyframe effects so the SVG conversion program has as little data to work with as possible.

When you design for the web you should keep things as simple as you can and avoid single pixel thick lines. Your illustration is awfully complex so it's going to be hard to diagnose problems. Your screenshot from AE does not show us anything. To diagnose problems you need to select the layers that are giving you problems, press the U key to reveal all modified properties and then start turning things off until the problems go away. We need to see those modified properties in the timeline to give you more than general suggestions.

J
janessat15022340Author
New Participant
January 17, 2018

Thank you so much for your quick response!

I am going to give it another go start with not rasterizing the image from the beginning when I import.

While I am trying again, Do you know if there are any other methods for getting a line art image to sort of draw itself in on a webpage? I essentially have three separate sections of work called Lines, body, Dots that I would like animated separately. the problem with managing layers is that there are so many. inside each section contains hundreds of shapes! This makes AE obviously move very very slowly. Any recommendations? Sorry If my questions are a bit all over the place.

J
janessat15022340Author
New Participant
January 24, 2018

I do not produce SVG animations, but I do a lot of complex animations in AE and the best suggestion that I can give you is to simplify. If you are drawing on hundreds of lines in a couple of seconds you can get away with revealing dozens of them at a time and nobody will know the difference. I recently did a project where detailed pen and ink drawings were drawn on the screen, colorized and then turned into photographs that turned into a movie. A hero frame from the video was sent to an Illustrator artist who created the beautiful and amazingly detailed vector drawings. I had her group key elements on to separate layers so that when I imported the AI file as a comp there were only about 20 layers. Some of them had as few as 10 lines on them, other layers had hundreds of lines and shapes. I simply animated some masks on the layers with many components and used trim paths on a half dozen or so layers with 10 or fewer lines. The entire transition took 40 frames and the client was extremely happy and said to me "How did you ever animate those thousands of lines in a day?"

I would try that kind of approach with your drawing. You could use the original Illustrator art as one layer, then use a very wide shape path to reveal many of the lines at the same time. I'm not sure how the SVG conversion software works so that might be a dead end, but simplify is definitely not a bad suggestion.

Your screenshots are a little better but I still cannot see modified properties of the layers. Just pick one typical layer, press the U key twice and show me what you are doing with that layer. Maybe I can help.

I just thought of another option. You can change the stroke color to a gradient along the path in Illustrator then use that path as the source for gradient wipe. In AE you could convert the vector layer to a shape layer. The gradient would not come through, you'll just get a gray line and the AI layer will get turned off. Then you can apply gradient wipe and use the original AI layer as the source. This would allow you to break your drawing up into 10 or 15 sections and then animate them with just a couple of keyframes. I don't know if the SVG plug-in will work with gradient wipe, but it would certainly simplify things.

From this artwork:


Rick,

Thank you so much for your response last week! I took some time to rework and focus on the tips you mentioned about removing the fill and making sure I reduced some of my layers or at least animating a few of the layers. I wanted to make sure I could exhaust all my options before asking for help again. Luckily, It all totally worked, my project came out great and my webmaster is working to translate it to the web.

Thanks so much for the help!

-Janessa

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices