How To Convert After Effects Animations to HTML
ฝัง
- เผยแพร่เมื่อ 30 ก.ค. 2024
- This video will show you how to convert an Adobe After Effects animation to HTML or SVG code.
Download After Effects: www.adobe.com/products/aftere...
Download BodyMovin: aescripts.com/bodymovin/
How to install BodyMovin: airbnb.io/lottie/after-effects...
Music by: Nicolai Heidlas Music - Chase Your Dreams
/ nicolai-heidlas
I'm a motion designer and I always wanted to make animations in HTML5, this way is so easy! Thanks!
Awesome! You welcome. 😁
Thanks, great tutorial, exactly what I needed. I also love how you say "coma" at the end of each line.
You welcome! 😁
@@ieatwebsites Question, when you say "I want to see what I have in my code." I don't know where you're seeing that code. Is that in AE? Is that some other code/text app?
Great video thank u!!!! After designing an animation on after effect , what format do they have to be exported to website? ( like scroll animations , parallax effects, text effects etc)
yes yes and yes just what i needed!!! for my work.. i hope that keep this plugin going and concept going will probably help 1000s of professionals
Hi J, congratulations for the 10k subscribers, this is one of the best tutorials I found about Bodymovin! could you tell me what text editor do you use? Thanks and congratulations again!
Thank you so much Juan! I'm using Visual Studio Code.
Congrats on the 10K J! This looks like a really useful tool. I wonder what the limitations are.
Thank you timo! I will keep using this tool and I'm sure I will find some limitations. I'll keep you updated. ✌️
This is amazing... I’m gonna try it tomorrow
I got an error in my js file saying that "animation is defined, but never used"
Wonderful tutorial thank you SO much!
Is there any way to use image URLs instead of image files to shrink the file size?
Wow body movin is awesome im still amazed at how he typed " rederer instead of renderer and it still worked holy cow
maybe it has options by default?
is this a feasable method for using animations in a game app like a sidescroller for example? or does it use too much ressources?
my animation plays in google crom when i test with the lotti preview but its white in firefox and in both when using your code. is it possible to use transparencies in the animation or does this might be the cause of the trouble?
You say you have your after effect code in the Visual studio code, how do I get that to work? Ive tried to open a new editor and put all the code in but it doesn't work..
THIS IS REALLY AMAZING!!
And i really hope Adobe can also control the Animation technique trend in front-end industry!!
Just getting into After Effects. Would this work with any animation? i.e. ones that aren't just text?
Great tutorial. Do you have any tips on how to make the animation to work on mobile? Currently, Safari desktop won't work, but all the other browsers are working. No mobile in any OS will show the animation. Thanks.
Finally i found this!
Nice tutorial! ¿there's another way to export a json file without use bodymoving?
Where did you get the initial html code file from?
Hiya! Thanks for the video, but is it possible to hide the anim after it being played?
if you have adobe cloud couldn't you have opened your after effects movie in adobe animate then published to HTML5 'OAM package' ?
wow you are genius. i find this! thank you.
You welcome! 😁
Hi, and thx! Question: which files should I sent to the developers?
Does it support element 3d and optical flares plug-ins, is it compatible with the scenes created by cinema 4d inside after effects
Going to try this. Apparently Bodymovin in 2020 has an HTML option, but the HTML file it puts out is HUGE (probably the only time I will say that about anything that's
Please can you help me with SVG Images. I mean can you help me with this type of image files you used on this video or any type of image files that I can use on video creations. I need your help. Thanks
Hello there!! Would you be kind enough to share the html and JS codes you used in this video :) ? Tks!
do you know if theres a way to integrate bodymoving to wordpress pages?
is it possible to have the text be dynamic, like instead of saying "10k Subscribers" it would change depending on a text file you have on your computer, so you could just go in, change the text file, and have the entire animation change?
nice tut :)
is it somehow possible to change the text without re-rendering it? like change it to "11k or 12k" ?
can i render more objects and just retrieve them as needed?
I don't think so unless you know how to change the coding, it would be best to render again after changing the text
Sorry if this is a stupid question but you jumped from lets look at after effects to looking at the code in vs code? What code are you looking at?
Amazing dude!!!
Awesome!! thank you, but where did you get the initial html code file from? I'm new to all of this and i kind of get stuck at minute 3:24... hope you can advise! many thanks!
it's basic html. You need a website (have a domain, hosting account, FTP access, make an index.html file... don't forget to get an SSL certificate. I use NameCheap for all those services and my FTP client is WinSCP) or virtual website (set up something like XAMPP).
does it play sound as well?
Great, Thank for sharing. Sorry, you can make charater walk animation and convert to html5 with bodymovin please?
hello, awsome video. Thanks. But do you know how to add the animation in a wordpress website? thank you
can i paste that into googleads?
WOW !!!!!! So Good !!!!!
amazing! thank you buddy!
You welcome!
I didn't even know such stuff is possible, is there any limitation on what can be done on the animation itself?
Thank you for great video. I have a question after loading data.json file. We can a href for any tag. Actually i want to give clickable link to two letters...
Helpful thankyou
I need to transform an AF file into an SVG, but when I do that the "puppet" effect that I used doesn't work does anyone have any solutions?
Just what I needed thx. 🙌
You welcome!
Hi, congratulations for everything. One question: if I import a gif in after effect and then use bodymovin to export it as html the result is that I don't see the animation, is there a reason? Thank you! (sorry for my English..)
It needs to be vector. Is not going to work with a gif.
I have a problem...it works but it gives me an error, it wants images. someone could help me?
I followed all the steps, but my animation just doesn't show up on my html file when opened on a browser, i even went on Lottie files to preview the animation but it didn't even appear on there. Help please.
what if there is png in my animation ? is it gonna work ? I dont think it will but can it work if I convert the pngs to svg first and then import those svg images in after effect ?
I love animations.. Waooo nice
Pretty cool, but can you make working buttons?
There is a typo error in the code "rederer". How can it works...?
What about the export settings?
Amazing! Thank you.
You welcome!
What was the size of the output files?
Wait, where did you get the code from? Is it something standard to copy and paste?
Why does the squeak connect to the network?
Nice. Could you put all the info from data.json and bodymovin.js into the html file so that you only have one .html file??? I need the animation to work inside an Outlook newsletter. Thanks.
no way, this requires javascript, the plugin relies on javascript files. If you want to do without then you will need a different plugin
It's not working in the newest version of the AE :"(
Cool but wat about responsive? If want to behave responsively for difference devices?...
how did you make the initial html and java script file?
I installed the plugin but when I select my comp, it will not let me render
why u don't show the settings, i try to render in HTML but idk how
I have export all stuff from bodymovin but when i check it to HTML5 Validator it says, Missing primary asset check
thank you! that is really healthy
Thank you for this great tutorial. I understand this is for just vectors. I am using a video which I would like to convert to html5 animation. Any tips how to do this using after effects or other?
Did you find out?
In my understanding you can just do dynamic elements like text and graphics with this method. What you are probably looking for is converting your video file to webm and then implementing it to your website. That is quite possible, just not as dynamic as you would think. You would need to pre-render this and then render it again for making changes.
It does not work. I got error code : lottie.js:3 Failed to load file:///Users/jk/Desktop/test/data.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.,
how to make it just play once or when the mouseover then play it?
You disable the loop if you wanna play it only once.
For mouseover only playback, you'll have to modify the javascript code a bit. You need to fire the playback with onmouseover event attribute.
how to add multiple animation in one single page?
'Uncaught typeError: bodymovin.loadanimation is not a function'.
How to resolve this problem
Capital A
Thank you so much!
It only works for me in edge and firefox, not chrome. in chrome, I'm getting this error:
"Failed to load file:///C:/AE-to-html-test/data.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."
also, in edge and firefox, the animation plays super fast for some reason.
Anybody have some advice? thanks
I'm getting the same issue. Can you help us out for this @iEatWebsites ??
only works in after effects cc
Thank you very much
When I click on Render, I get "Render failed". Please help...
siraaa....
Wow nice
Is very nice!
how come I have exactly the same code in scrip and I get an error :(
var animation = bodymovin.loadAnimation({
container: document.getElementById('anim'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'data.json'
})
Do all the elements have to be created in AE? What if the animation has PNGs?
This is for vector files. If you want to animate png files, you can do it with CSS.
why does my bodymovin take time to render/export? And I only have 3 layers. I'm testing it now.
The animation is long or complicated? Can you test with a very simple animation?
I am trying to make our After Effects files .HTML using this method and so far I've used Body Movin with the demo setting and it plays incredibly quickly. The .Json method didn't work for us
Which program is your html coder
Visual Studio Code: code.visualstudio.com/
Hey guys! I'm encountering a problem where it doesn't reflect anything on my browser. I've followed all the codes but when I open my html file, nothing is there. Do you guys have any tips on this instance?
Do you see some errors in the console?
Where did you get the html file?
Video is awesome. Can you do police flashing lights. TY
You welcome!
thank you!
how about video or movie without svg ? can convert video to html ?
You can use an HTML video player. It comes with the browser.
Thank you so much
You welcome!
my after effect animation is converted intto 3 json files. How to give these three .json file in script?/
Do you have multiple animations?
yes, i have multiple animations in single after effect animation but while converting into json it creates three file
can someone share the code in index.html ?
Oh man ..snapp
Where did you get the data.json file i'm confused 😕
awesome
There's no render button.... :(
What'd I miss?...
Its not working using preset animation with image or using gif its not exporting them? Any solution. Its only working with text animations
It needs to be a vector file or a shape created using after effects.
@@ieatwebsites bro thnx for help but i convert vector file to shape and animate stroke (layer style) but still bodymovin not showing animation of shape
Это просто восхитительно.
Am I doing something wrong or is it impossible to use a 3D animation with bodymovin? Its just an animated svg logo with a "coin flip" animation...
It needs to be vector and not pixels.
@@ieatwebsites it is thats why im wondering :/ its basically a vector file directly from illustrator thats rotated in the z axis 🤔
rederer? Typo in the script.js file
yeah, how did it still work???
Maybe he fixed it later and edited it out?
Sadly, this doesn't work with complex animations which might be using gradients, fractal displace etc. :(
So you are telling me Element 3D VFX animations can't be converted to HTML5? That's really sad :((
@@sicfxmusic enjoy our website experience at 1 frame per minute!
@@Requiemes 1fpm is the way!
So where are the html and js files?
WOW . Thank you J
You welcome! 😊
You can contact me via Twitter @ieatwebsites
I can put music? Regards
No. Just animation