Control a Cinema 4D animation with your mouse on a webpage - After Effects & Lottie in Webflow
Vložit
- čas přidán 29. 08. 2024
- In this tutorial, we'll build a Cinema 4D animation from scratch. After animating, we'll render it in After Effects using the Bodymovin extension, then import it into Webflow. Finally, we'll set up an interaction so the Cinema 4D animation responds to our mouse position.
Full course, plus downloadable assets: wfl.io/after-e...
----------
Get started with Webflow: wfl.io/2r7cVUW
webflow.com
/ webflow
/ webflow
Webflow tutorial videos are hands down the best in the industry. And they're only getting better.
I love the milk pouring scene :D
Yeah! I was thinking how the hell did they do that, then I remembered he's the AE guy
The scene trying to tell that most CZcamsrs dragging on the intro that nobody wants to listen. lol...
I love how you blend humor with your tutorial videos. Keeps me watching. Nice work.
"Now, while this is loading, it's a good time to menti-- aaand it's already loaded." -- 1:42
what a time to be alive
I like to they are taking too serious and cool in the same time
Okay this is super awesome, please keep adding more C4D + webflow content
If when using bodymovin you keep getting "render failed" make sure you have "Allow Scripts to Write Files and Access Network" checked in preferences.
Edit > Preferences > Scripting & Expressions... > and check on "Allow Scripts to Write Files and Access Network"
THANK YOU i needed this!!
this saved my life!
Webflow tutorials are the best for cinema 4d tutorial. I was looking for est c4d tutorials and this tutorials help me alot
this is an epic video, following the tutorial and also i love his teaching style
oomg i thought you was a 40 years old bearded geek with eye glasses, lol, thank you so much for the efforts you are doing for making the tuts pleasant
Holy shit! I'm in love with Webflow and these sick ass tutorials. The narrator such a _chad_ . Lovin' the whole production behind these videos. *U R AMAZING!*
Love the comedic tone of this!
If bodymoving doesn’t work try preferences - scripting and expressions - allow scrips to write files and access network
Thanks for all great tutorials🎉
My mind just exploded. Do webGL next!
So elaborative!
where were you when I was a beginner 😂
LOL I LOVE THESE VIDEOS! I finally got to see the face of this marvelous voice!
Freakin'Awesom !
This is amazing! Is this also compatible with Blender?
yes, just render out an image sequence animation from blender and put into after effects
What is the json file size you got? My optimized PNG files are 8mb before render and after Bodymovin render it has 27mb!!!! Why is that? plz help
I would like to do this same technic as a back ground in portrait. But I seem to be running into a file size problem with webflow. What is the max json file size, and can this be achieved with maximum screen with a good resolution? I need to know the limitations more depth.
Love this, I need to start using webflow!
My Critique would be the drag and drop of the image sequence. This is going to blow your mind, Press Crtl (or command) + I to import, then select one image from the sequence and make sure 'image sequence box' is checked. Then it will import them all as one single asset, rather than a milllion separate assets. It'll essentially function like a video ^_^ X
Hi, Jake! A traditional image sequence like this isn't currently supported by the Bodymovin plugin; it will render blank. For this reason, individual layers for each frame are presently required to render the composition as a Lottie-compatible sequence.
@@Webflow Ahhhh! Pardon my ignorance, Good Sir! Keep up the great turorials! I am a happy subscriber! ☺️ X
That's awesome! always wanted to learn how to do that!
But i have a question, why import the the render as a set of frames and make a layer sequence rather just importing it as a jpg sequence and creating a comp from that. whats the difference? thanks in advance!
Brilliant! Well done!
Excellent video yet again! IS there a way of having the animation auto loop, UNTIL your cursor goes into it (then it 'scrubs') and when your cursor moves back out - it auto play loops again?
This is brilliant!! So funny. So good.
DUDE AS I WATCH IM LIKE wait i have been in a coma for 10 years~ just a few things have changed but i am INIT/// /
Yay...flash is back :)
Love the joke at the start HAHA!! Thanks guys
Bodymovin is not exporting the Jpeg Sequence, it keeps on rolling on image_90, and i have tried different settings, the .json file is not showing on webflow. It only export .json for shape layers only. Does the problem with the plugin?
Hello. I hope you are doing well. I ran into an issue that i tried to fix 2 times already. I've followed every step you did, and i have also original Cinema 4D and Adobe After Effects, but when I use bodymovin to render it to .json, it says render failed. Could you help me with alternative solution, or do you maybe know what is causing the issue. Thank you for your time.
Yeah a lot of us have this issue, but there's a very easy fix! In your after effects, enable allow scripts to write to files and access network
Edit > Preferences > Scripting & Expressions... > and check on "Allow Scripts to Write Files and Access Network"
If I place this as a hero image and put some text over it, will it behave the same way?
this is amazing
Great tutorial! XO
HI i was searching for a similar project ,How to place hotspots on 3d objects in webpage like the one in virtual tour projects ,Thanks!
Omg this is content 🙌
BRO I'M DYING. WHY IS THIS SO FUNNY LOOOOL
BODYMOVIN. anyone else got bodymovin issues? even though i've enable preferences and installed the extension from adobe cloud can't see it anywhere in AE despite restarts? Anyone know of a changed process with this??
It's pretty broken for me
how can I make a 360 rotation animation?
I need to have my C4D models shown in 3D view on my website as a 3D designer
Sick!
0:58 💀💀💀you guys are too funny
I would watch these videos because i just like them, not because i actually want to learn the stuff
Anyone have problem with import json file? I follow all the steps, but in webflow the animation doesn't work
what if we want to orbit around the center star?
How can a sequence of 120 frames x 235kb png's be viable to export (2 second animation on mobile). I've given this method about 8 hours and can't come up with a decent file size ???
My best solution this far has been a 12 frames animation that weights 19mb 😭
Keep getting error AEGP Plugin PNGIO Support (5027 :: 12)
But can you add a y axis along with the x axis?? Seems like that’d require an actual simulation, but would you add this in the future?
Hi, Hunter! This would likely require a simulation. Instead of 90 JPEGs along 1 axis, this would require 90 JPEGs along each of 2 the axes for X and Y (90 x 90 = 8,100 JPEGs).
That would also impact performance quite badly on a web page though due to size, remember this was just a simple jpeg pre-render set at 40% quality.
I think what you could do is however, create a 3D space in Webflow itself and then set distances on them and give the illusion of xy axes moving, it wouldn't look AS good as a proper simulation, especially not something you can create in the scale of hundreds of small stars, but I think it could work with a smaller idea that has 50-100 objects maximum. But would probably take a lot more time. Just a thought
You can do this with WebGL or Three.js, but I'm not necessarily sure how or if you can implement those through Webflow yet.
Nice, but how does this work on mobile?
Looks pretty cool! but RIP lighthouse score with all those JPEG images and no interframe compression
Yes I've been wondering about this too, maybe webgl support could fix this
Cool!
Why does he use JPG's instead of PNG's? Ima try with PNG's because I want transparency.
My lottie animation is not moving at all?
Wow!
Hey guys im running a 2011 macbook pro and my C4D won't launch (GPU?) Any alternatives to C4D?
This process works with all 2D or 3D animation tools that can render an image sequence (or that can render a video you can later convert to an image sequence). Check out 3ds Max, Blender, Lightwave - there are tons of great programs and platforms which should be able to do the trick!
is there a reason you didn't just import the images as a jpg sequence?
Great question! Bodymovin.js doesn't presently support JPEG sequences, so each JPEG needs to be brought in as a separate image on stacked layers.
Hello. You are fascinating Could you do a tutorial with multiple movements and objects? Would be very grateful to you.
This video is freaking epic hahahaha
That guy of the begining ahaha
1:01 that mouse tho
is it possible to do the same with blender? anyone plz reply
Sorry but you are not controlling cinema 4d animation with mouse. you control jpg sequence. Cinema 4D here is irrelevant. More important stuff is happening in After Effects
this guy
Wait what?
Just use THREE.JS, instead of having to worry about load, performance, and quality.
Three.js is an excellent option, but an image sequence is often best for elements and effects that don’t render consistently or at all - lens flares, global illumination, subsurface scattering, photorealistic depth of field, etc.
can anyone enlighten me why he didn't export straight from cinema 4D and then upload a png or jpeg sequence in after effects?
Hi, Matīss Jansons! Great question. Image sequences aren't supported by Bodymovin, which is why layering them as demonstrated in this video is our preferred method for achieving this effect. 👍
craziest shit ive ever seen.
Need u teach us C4D seriously lol
yes yes yes
So Bad ass!
So why do we need cinema4d again?! This can be done without cinema4d
Hi, Desmond Jay. This lesson shows you how to go through the process with Cinema 4D, but the principle is the same for any modern 3D tool like Blender. 👍
What the s#/7!
I was really excited for this until you realize that the client will be requesting 100's of image frames on page load, which has the potential to heavily increase site TTI (time till interactive) and negatively impact SEO as a result. This is a great idea, but terrible in practice. Please do not use this method in production environments!
Tell that to 🍎
that's not how you import image sequences
A traditional image sequence (single layer) is not currently supported by the Bodymovin extension. If you have an alternate way to import that properly exports to the JSON, we'd love to learn!
I think i just lost my universe W O! W
Can we do this in, ehem.. Adobe Muse..?
you still use muse?? I thought it was discontinued.
20 minutes on the dot...
Center of galaxy is a black hole. Not a star.
来看看大佬