Create Stunning Animations With Webflow (Crash Course)

Creating cool animation in Webflow is one of the biggest appeals of the platform. In this video we’ll be creating some of the most popular animations used in Webflow today.

📽️ CHAPTERS
00:00 - Intro
00:53 - Project overview
02:04 - Animation basic concept
05:48 - Loading animation
13:20 - Masking animation
17:37 - Skewing text
20:23 - Animating button
21:56 - Adding hover animation
36:41- Horizontal animation

📱 Find us on SOCIAL MEDIA

Thanks for watching our video!

#webflow #webdesign #animation

[bochano]

This video was my transition inspiration for moving from static to animated details. Thanks!

[brianharness]

Very nice video, it has really helped me a lot as I transition into learning webflow but as was mentioned I really wish I could see both panels (layers & the animation panel 100%) . Thanks so much again for the information

[cipriant]

This is gold, thanks a lot for showing in detail one way of achieving these effects.

[brightezumah]

This was very helpful. Really appreciate it!

[vlrmedia]

THANK YOU!! THIS WAS THE BEST AND EASIEST TUTORIAL <3

[sbthebrand]

This is a really cool tutorial. I wish it had the test file and a little more detail on creating the loading animation.

[alwayjohnrallos]

What I need. Please do more videos like this.

[saralagab]

best webflow content ever this channel is a GEM 👌👌

[thewebstylist]

So awesome throughout! I was hoping to see how looks acts on mobile view

[sadiq]

Super helpful Ran!
Thank you so much ❤️

[anddrew]

these are very cool animations! thank you

[shivudesign]

Much appreciate I was waiting since while that someone will make a detail video on whole site how to dev such trendy creative animated site and you make it out 😇 please make a new series on such creative web site dev for sharing knowledge and learning purpose 😊

[lydiawere]

awesome tutorial, thanks for sharing.

[Fostit]

I still can't believe this is free! thank you!

[stewkouassi]

How frenchspeaker in a small country in Africa tell you : MERCI !
You give real value

[prabhatsaini]

I followed along the full tutorial. The last part of Horizontal Animation is not fully clear. Please remake another video on it. Will be very helpful. The part before it is very useful.I learned a lot. Thank You so much.

[ErDige]

Still figuring out how to build that OUR EXPERTISE section in order to be responsive, be able to properly align the arrow to the right, and all that stuff

[Applecitylightkiwi]

v good video. i seem to get stuck on the text animation. because it is on page load. however on scroll view i do not get the same options. i think this is due to the limiation of free ? might need some custom code going on for that to work i think

[Thingwithlegs]

Hi Ran, amazing tutorial, but I do have very important, constructive feedback, please next time leave all the layers visible on the sidebar (this one had your picture over them, especially on the cms list effect). This is important for people with hearing difficulties, so to see better what you're trying to explain.

[dimaxm]

Thanks, Much appreciated.
Just two question. When you add smoothing - is it possible to add even more then 100 percent. To make it more liquid like.
And also is it possible to add a delay before the animation starts.
P.s I just started webflow couple days ago, so a complete newbie. Thanks.