Animated SVG created with AE and Bodymovin

I Need Help
1

I’m not a code guru!
I’ve used After Effects to design an animated SVG and exported to JSON using the Bodymovin AE extension.

How do I get my SVG animation into Blocs?

THX

2

Follow these Bodymovin / Lottie usage instructions:

These are the various aspects of Blocs to help implement the various usage instructions or most any third party solution. Use the applicable ones relative to the above provided instructions.

1 Like
3

I am really interested in this topic too. I can create simple infographics in illustrator but would like to animate them. For example, displaying a simple circle (key-line only, no fill) in a light grey and then animating a darker version on top that gently goes round based upon a percentage value e.g. 25%. So the darker circle would start at the bottom and grow (animate) to quarter of the circle to signify 25%. While it is growing, a percentage figure in the middle of the circle would show the figures counting up from 0 to 25.

Is there an easy way to do this considering the fact that I am well versed with illustrator? I know illustrator allows any vector to be saved as an SVG file. The question is, how do you create such an animation and apply it to Blocs such that it works hand in hand with scrolling?

4

Well, I use Hype 4 to make small animations in the blocs, it generates a folder with a code that can be implemented in the project. If you already have experience in adobe software like animate, hype 4 is very simple to work with. For example, I created a simple animation on my website, on the contact page: https://veraoshop.com/contato. It is an svg image. more information I got on that site. Home. You can also create a simple application, as I did in this example: https://veraoshop.com/pesquisa/emagrecer-verao

1 Like
5

You would need Illustrator + After Effects with the BodyMovin / Lottie plugin.

Another option is Keyshape App along with their Lottie plugin. Since you are familiar with Illustrator you might feel more comfortable with Keyshape than using AE.

Many ways, below is their provided method. You would just need to use the same Blocs features that are listed above regarding usage implementation.

6

Thank you Blocs-User and Gleitons, I will certainly look into your recommendations.