Webflow is amazing software on it's own, but I will venture to say that ^^THIS GUY^^ is responsible for 50% of the growth and usage of the platform. The Webflow U and training videos are priceless, and I so wish other companies/platforms/software makers would invest in the same way. Keep up the great work! A Happy Customer
I told Nelson this when I saw him in person two years ago, and I'll repeat it here - best series of video tutorials for anything, anywhere, EVER! This guy is priceless!
I am slowly trying to understand webflow in order to build my website with it. Wasn't expecting to bump into a tutorial as clear and calm as this. Big props, definitely got me as a client if this is the webflow standard
I am from venezuela, man you are a very very good teacher, I understand every single video you make (sorry for my bad english) but thank you very much. Webflow is the best
This is absolutely incredible. Is there a way to take these after effect animations and make them the actual background of your site? Like can the json files be selected a a background for the div? So that you dont have to relative position everything else on top of that background div...
I thought I was super focused in being able to study new things unlike before. It turns out it depends on who teaches it. Humor makes a big difference.
This is great! Is it possible to add text on top of a lottie animation? I am wanting to create a background with some subtle animations and then I want to add some containers with text fields on top of that.
Hi Quintin! Yes, it’s possible to add text on top of a Lottie animation. Set your text element’s position to "Absolute" relative to the container it’s in (like a divblock, container, section) and set its z-index value to 1. As long as your Lottie animation’s z-index is set to auto or any number below your text element’s z-index, your text element will appear on top. Check out our content on absolute positioning (university.webflow.com/lesson/absolute-positioning-layout)!
Great news and great tutorials! But there is an important detail regarding typography animation in your new tutorials that is missing: how to export from After Effects an animation that use typography, like a write-on effect, that will keep the text and not render the text as shapes? In Bodymovin it the "Glyphs" setting. I looked into Lottie website, on Webflow forums, but I can't find any instruction on how to deal with it. I am not a coder...I am a motion graphics person. Any help would be great!
Hi, Rafael! To use fonts without converting them to glyphs, uncheck the Glyphs setting you mentioned. Upon rendering, Bodymovin will prompt you to provide information regarding, if applicable, the path of any custom fonts, the weight, the style, etc. Take a look at github.com/airbnb/lottie-web/wiki/Text if you haven't already. There's also an active GitHub repo with Lottie/Bodymovin users that might be able to shed some light on how the Bodymovin plugin works in these cases: github.com/airbnb/lottie-web/issues Hope this helps! In addition to the resources above, please feel free to post on our user forum at forum.webflow.com. 👍
@@Webflow Thanks for getting back. I looked in the links you wrote, but I am really unable to figure out how to do this. I am trying to keep the .json file with the characters because of the SEO versus shapes. How can I set the font size, color, etc in Webflow for a .json file? I tried to modify the settings within webflow, only the font choice was working, but nothing else. I feel it has to be set within Bodymovin when "Glyph" is unchecked, followed ny a menu asking for setting such as CSS Class? See image: imgur.com/4pkiu1B But again I am not a coder (my reason to use Webflow...). Any help, thanks! I didn't find anything on the webflow forum that addresses this neither.
Hi! I think I have some problems when I export my animation with Bodymovin. Everything is perfect until I export it to webflow, my animation is not complete. It starts not really normally at the beginning all the elements of the animation are not visible, and then after 2 seconds it's okay. I checked every settings and I don't find any solutions...Please HELP!
Can you please post this issue on our community forum ( discourse.webflow.com ) . Don't forget to add your share link to the post ( university.webflow.com/lesson/share-your-project-and-invite-collaborators )
Does anybody know how I can use AE animations in webflow besides using bodymovin/json? Having issues where bodymovin doesnt include all the effects that I have in my animation :))
I have a semi-complex interaction with my json that webflow doesn't provide a way to use. (I play different segments for hover, press, release, hover out) Is it possible to pilot a webflow lottie element via the custom code? if so how? Asked on the forum but nobody answer...
For now I used the old method, but somehow I have to put the renderer to "canvas", loosing quality of my animation, because "svg" doesn't display anything... Anybody knows what could make the SVG not displaying? forum.webflow.com/t/guide-lottie-bodymovin-animation-in-webflow/80569
Hi Bartek! It sounds like there may be an issue with the export of the json file, but it's difficult to tell without further details. Please reach out to us here with more information so that our team can investigate: university.webflow.com/support
Would anyone know a work around for exporting the after effects animation using something other than "Bodymovin" ? My adobe cloud isn't working, and when I try to repair it , the app states "adobe creative is missing files" and I cant remove it because it states "cant uninstall you have apps that depend on it" Any help would be appreciated!!!!! BTW I have AE CS6.
If you had the same issue as me and your animation included images, here's the answer on the forums: discourse.webflow.com/t/trouble-with-lottie-animation-importing-into-webflow/134644 There's a box to check in the settings to include images
![FNAF vs TF2 - Episode 2 [SFM]](http://i.ytimg.com/vi/z5b3V2-VLb0/mqdefault.jpg)
To open after effects, open after effects.
Best tutorial ever!
0:42 Amazing!
I'm about to say the same thing. LOL
Dude I would pay a subscription to have you teach me everything in life.
@Musa Crosby sad as hell you are trying to advertise on a webflow video
Webflow is amazing software on it's own, but I will venture to say that ^^THIS GUY^^ is responsible for 50% of the growth and usage of the platform. The Webflow U and training videos are priceless, and I so wish other companies/platforms/software makers would invest in the same way.
Keep up the great work!
A Happy Customer
Thanks Doc Pixel! 💙
@@Webflow You're more than deserving and welcome!
I told Nelson this when I saw him in person two years ago, and I'll repeat it here - best series of video tutorials for anything, anywhere, EVER! This guy is priceless!
Finally, I can put a face to the voice that somehow manages to flawlessly deliver engaging lessons.
I am slowly trying to understand webflow in order to build my website with it. Wasn't expecting to bump into a tutorial as clear and calm as this. Big props, definitely got me as a client if this is the webflow standard
This dudes communication skills are on point! Great job guys. Im hooked on Webflow. Trying to learn as fast as possible.
I don't even use webflow but this guy bring the tutorial to a new level, that's why I'm watching it 🤣
I am from venezuela, man you are a very very good teacher, I understand every single video you make (sorry for my bad english) but thank you very much. Webflow is the best
Im so happy to see what you look like. Lol. The voice behind the tutorials!
Nobody:
This man: and that looks pretty good!
this is amazing i use after effects everyday for work now i can use it for my web design " that easy " thank you webflow
Timestamps would be a great addition, regardless thank you for these helpful videos!!!
Noted! We'll start doing this ASAP!
How would this look on a mobile phone? Is this page responsive?
man you crack me up at least 10 times a video
This is absolutely incredible. Is there a way to take these after effect animations and make them the actual background of your site? Like can the json files be selected a a background for the div? So that you dont have to relative position everything else on top of that background div...
This is the most amazing thing I have ever seen.
This guy is a natural.
10:32 for Motion Designer or anyone who want to skip the AE part.
You know what?..
That looks pretty good.
I thought I was super focused in being able to study new things unlike before. It turns out it depends on who teaches it. Humor makes a big difference.
These tutorials are actually more funny than 'real' comedy videos. Who would've guessed that.
From zero to hero. Great webcast!
Great video. Love your sense of humor :)
so...by "downloadable assets" you only mean the free plugin, not the assets for the project??
0:45 thank you!!! you solved my problem
what's the password to open sesame ? :))
This is great! Is it possible to add text on top of a lottie animation? I am wanting to create a background with some subtle animations and then I want to add some containers with text fields on top of that.
Hi Quintin! Yes, it’s possible to add text on top of a Lottie animation. Set your text element’s position to "Absolute" relative to the container it’s in (like a divblock, container, section) and set its z-index value to 1. As long as your Lottie animation’s z-index is set to auto or any number below your text element’s z-index, your text element will appear on top. Check out our content on absolute positioning (university.webflow.com/lesson/absolute-positioning-layout)!
That's how a video tutorial should be. Short and comprehensive.
You are amazing!! 🤣 to open after effect...
Great news and great tutorials!
But there is an important detail regarding typography animation in your new tutorials that is missing: how to export from After Effects an animation that use typography, like a write-on effect, that will keep the text and not render the text as shapes? In Bodymovin it the "Glyphs" setting.
I looked into Lottie website, on Webflow forums, but I can't find any instruction on how to deal with it. I am not a coder...I am a motion graphics person. Any help would be great!
Hi, Rafael! To use fonts without converting them to glyphs, uncheck the Glyphs setting you mentioned. Upon rendering, Bodymovin will prompt you to provide information regarding, if applicable, the path of any custom fonts, the weight, the style, etc. Take a look at github.com/airbnb/lottie-web/wiki/Text if you haven't already. There's also an active GitHub repo with Lottie/Bodymovin users that might be able to shed some light on how the Bodymovin plugin works in these cases: github.com/airbnb/lottie-web/issues
Hope this helps! In addition to the resources above, please feel free to post on our user forum at forum.webflow.com. 👍
@@Webflow Thanks for getting back. I looked in the links you wrote, but I am really unable to figure out how to do this. I am trying to keep the .json file with the characters because of the SEO versus shapes. How can I set the font size, color, etc in Webflow for a .json file? I tried to modify the settings within webflow, only the font choice was working, but nothing else. I feel it has to be set within Bodymovin when "Glyph" is unchecked, followed ny a menu asking for setting such as CSS Class? See image: imgur.com/4pkiu1B
But again I am not a coder (my reason to use Webflow...). Any help, thanks!
I didn't find anything on the webflow forum that addresses this neither.
This is amazing!!
Blender? 👀
just say incredible!
Hi! I think I have some problems when I export my animation with Bodymovin. Everything is perfect until I export it to webflow, my animation is not complete. It starts not really normally at the beginning all the elements of the animation are not visible, and then after 2 seconds it's okay. I checked every settings and I don't find any solutions...Please HELP!
Can you please post this issue on our community forum ( discourse.webflow.com ) . Don't forget to add your share link to the post ( university.webflow.com/lesson/share-your-project-and-invite-collaborators )
Does anybody know how I can use AE animations in webflow besides using bodymovin/json? Having issues where bodymovin doesnt include all the effects that I have in my animation :))
awesome !!!!!!!
Thank you!
Great feature, just love it!
Nobody asked yet, so... what about mobile? It didn't work for me (Android with Google Chrome).
I have a semi-complex interaction with my json that webflow doesn't provide a way to use. (I play different segments for hover, press, release, hover out)
Is it possible to pilot a webflow lottie element via the custom code? if so how? Asked on the forum but nobody answer...
For now I used the old method, but somehow I have to put the renderer to "canvas", loosing quality of my animation, because "svg" doesn't display anything... Anybody knows what could make the SVG not displaying?
forum.webflow.com/t/guide-lottie-bodymovin-animation-in-webflow/80569
I'm stuck. I can't get anything to move on scrolling
The json file imports into webflow as a text file and not an animation, any ideas?
Hi Bartek! It sounds like there may be an issue with the export of the json file, but it's difficult to tell without further details. Please reach out to us here with more information so that our team can investigate: university.webflow.com/support
Would anyone know a work around for exporting the after effects animation using something other than "Bodymovin" ? My adobe cloud isn't working, and when I try to repair it , the app states "adobe creative is missing files" and I cant remove it because it states "cant uninstall you have apps that depend on it" Any help would be appreciated!!!!! BTW I have AE CS6.
This tool built by an ex-Webflower might help: observablehq.com/@forresto/video-to-lottie
@@Webflow Thank you very much, I will try it and respond, thanks for the amazing videos! Also update: the link worked perfectly thank you!
Amazing! Thank you Daddy!
amazing
Hi, thank you for your tutorials.
How do we upload an animation that has puppet wraps? As far as my research goes lottie doesnt support it.
You don't. It's not supported.
@@JustinHeidenreich thank you
you could try to do the regular animation and export it to a jpeg json file using the technique in this video ruclips.net/video/FdigUlNdU6g/видео.html
If you had the same issue as me and your animation included images, here's the answer on the forums: discourse.webflow.com/t/trouble-with-lottie-animation-importing-into-webflow/134644 There's a box to check in the settings to include images
You are literally Van Wilder of tutorial videos
Does anyone know the name of the guy? He's such a good speaker
That's McGuire!
I have tried other page builders but I found refuge in webflow, but not ready to try After Effects 🤣🤣🤣
This guy should have a Jeopardy try out - if Aaron Rodgers can do it - this guy should have a shot.
i gave up at step 1....
Everytime I see this guy I remember the part he couldn't pronounce bodymovin 😂😂 hilarious
Dude hits the keyboard so hard...lol
Why Captain America is making webflow videos?
I want to have this guys babies but I can't because I am a man but if I could I would be a man that'd
Porque minha foto anda em todo o mundo
Now i can't concentrate on what he is teaching