123
user profile image

Another animation by the great Gabriel H Fermanelli done in After Effects and exported to svg.
It uses some AE expressions, sliders, time remapping and mainly solids and masks.

Note: Since this animation was not optimized for web animation, and uses hundreds of elements and hundreds of masks, it has some performance issues, but works fairly well on major browsers. Firefox seems to perform worse than the rest and IE has a couple more glitches than the rest. Haven't tried it in Edge.

Link to Gabriel's work: https://www.behance.net/gahfe

Comments

  1. Awesome, made my day!

  2. You need to write about this process. Would love to hear more about using after effects for SVG animation and what benefits it can have when creating complicated motion such as this.

  3. Love the animation! Performance is not good on mobile or in Edge (Win 10) but great in Chrome.

  4. @grayghostvisuals I will. I'll also make a short video explaining how to use it.

  5. @chrisgannon Yes, there's too many masks and nested clippings. I'm pretty satisfied with the result considering I didn't change anything to the original project and this is the raw material without rendering. Also, the original animation has strokes and I tried your technique to add strokes to groups with filters but performance was awful, so I had to remove them.

  6. @airnan No that group stroke method was never going to work - even on simple shapes it's dog slow . The conversion is great though - looks flawless.

  7. This is very cool. If you don't mind me asking, what did you use to animate / translate to SVG animation on web? I'm very interested in trying this technique out!

  8. @SJF This animation is done in After Effects and I used this plugin to export it.
    https://github.com/bodymovin/bodymovin

  9. No sé qué es mejor: la animación, o el plugin que hace solo magia. Es todo muy confuso. Me encanta.-

  10. @airnan really looking forward to the video/tutorial from you on the process ^_^ !! these animations are great!

  11. Found your comment on github with a link to a video explaining the process to install and use the plugin (not in English), mentioning it here for the sake of completeness : LINK Thanks!

  12. Wow, amazing work! Will take a look at BodyMovin straight away – thanks!

  13. Excellent Work.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...