Control a Cinema 4D animation with your mouse on a webpage — After Effects & Lottie in Webflow

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.

----------

[HarleyKing]

I love how you blend humor with your tutorial videos. Keeps me watching. Nice work.

[james_mccollum]

Webflow tutorial videos are hands down the best in the industry. And they're only getting better.

[prtr]

"Now, while this is loading, it's a good time to menti-- aaand it's already loaded." -- 1:42

[luman]

Okay this is super awesome, please keep adding more C4D + webflow content

[DavidCarmonaUX]

this is an epic video, following the tutorial and also i love his teaching style

[georgy.design]

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!*

[kameld]

I like to they are taking too serious and cool in the same time

[azi-portfolio]

Webflow tutorials are the best for cinema 4d tutorial. I was looking for est c4d tutorials and this tutorials help me alot

[ChamaneKing]

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

[leonnikoo]

Love this, I need to start using webflow!

[irinafawcett]

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"

[GeorgeBrooksKC]

This is brilliant!! So funny. So good.

[elifares]

LOL I LOVE THESE VIDEOS! I finally got to see the face of this marvelous voice!

[dmitrylevitsky]

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!

[cansam]

i can tell the use of 3D for web is going to be big!

[thejaysehansen]

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?

[abdullahnaxar]

So elaborative!

where were you when I was a beginner 😂

[dexnodesign]

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.

[TomTom]

If bodymoving doesn’t work try preferences - scripting and expressions - allow scrips to write files and access network
Thanks for all great tutorials🎉

[mithunkrishna]

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!