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!
1 Correct answer
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 Illustra
...
4
Replies
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.
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
AdChoices