Create Stunning Animations With Webflow (Crash Course)

  Рет қаралды 116,704

Flux Academy

Flux Academy

Күн бұрын

📘 Free e-book "The Blueprint For Insanely Successful Webflow Designers" 👉 bit.ly/3TKPjUl
🎨 Clone the project file here: www.flux-academy.com/resource...
👉 New to Webflow? Sign up for an intro workshop: bit.ly/3QQJPCP
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.
Link to Webflow easing: easing.webflow.io/
📽️ 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
Do you want to become a Webflow expert? Check out our course 👉 bit.ly/3jMxocU
📱 Find us on SOCIAL MEDIA
Flux Academy's Instagram 👉 / flux.academy
Ran's Instagram 👉 / ransegall
Thanks for watching our video!
#webflow #webdesign #animation

Пікірлер: 136
@bochano
@bochano Жыл бұрын
This video was my transition inspiration for moving from static to animated details. Thanks!
@cipriant9190
@cipriant9190 Жыл бұрын
This is gold, thanks a lot for showing in detail one way of achieving these effects.
@brianharness9872
@brianharness9872 9 ай бұрын
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
@brightezumah2900
@brightezumah2900 Жыл бұрын
This was very helpful. Really appreciate it!
@vlrmedia6677
@vlrmedia6677 Жыл бұрын
THANK YOU!! THIS WAS THE BEST AND EASIEST TUTORIAL
@infetani
@infetani Жыл бұрын
This is just what I needed, tnx man.
@anddrew5841
@anddrew5841 Жыл бұрын
these are very cool animations! thank you
@jevgenisuija
@jevgenisuija 5 ай бұрын
Cool! Thanks Flux! I love You!
@saralagab4036
@saralagab4036 4 ай бұрын
best webflow content ever this channel is a GEM 👌👌
@alwayjohnrallos7359
@alwayjohnrallos7359 Жыл бұрын
What I need. Please do more videos like this.
@samsonbrody6308
@samsonbrody6308 Жыл бұрын
Amazing video. Props my guy
@sadiq9687
@sadiq9687 Жыл бұрын
Super helpful Ran! Thank you so much ❤️
@FluxAcademy
@FluxAcademy Жыл бұрын
Happy to hear!
@dickyafisena8595
@dickyafisena8595 Жыл бұрын
this is amazing🔥
@been5063
@been5063 Жыл бұрын
As usual very high quality content
@FluxAcademy
@FluxAcademy Жыл бұрын
Appreciate it 🙏
@lydiawere
@lydiawere Жыл бұрын
awesome tutorial, thanks for sharing.
@designwithudit
@designwithudit 4 ай бұрын
THANK YOU SO MUCH FOR THIS VIDEO.
@arifhaiman5
@arifhaiman5 11 ай бұрын
Best tutorial. Thanks
@AndresGutierrez-sz2oc
@AndresGutierrez-sz2oc Жыл бұрын
Super!! thanks
@sbthebrand66
@sbthebrand66 8 ай бұрын
This is a really cool tutorial. I wish it had the test file and a little more detail on creating the loading animation.
@swagmoney6321
@swagmoney6321 Жыл бұрын
Amazing video I learned so much
@Youness.
@Youness. Жыл бұрын
Thanks a lot ❤
@nate234
@nate234 Жыл бұрын
Sweet!!!!
@thewebstylist
@thewebstylist 7 ай бұрын
So awesome throughout! I was hoping to see how looks acts on mobile view
@aleksfinances5446
@aleksfinances5446 Жыл бұрын
I like your tutorials Very much
@rezajazem7443
@rezajazem7443 Жыл бұрын
Thanks a lot 🙏 I needed it
@FluxAcademy
@FluxAcademy Жыл бұрын
Most welcome 😊
@ki001
@ki001 Жыл бұрын
Nice!
@sankethiran1183
@sankethiran1183 Жыл бұрын
works, chock-full thanks!
@FluxAcademy
@FluxAcademy Жыл бұрын
Much appreciate
@vicsalaki
@vicsalaki Жыл бұрын
Thanks!
@Thingwithlegs
@Thingwithlegs 10 ай бұрын
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.
@shivudesign9210
@shivudesign9210 Жыл бұрын
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 😊
@FluxAcademy
@FluxAcademy Жыл бұрын
Happy to hear!
@mohammedmatar4341
@mohammedmatar4341 Жыл бұрын
need the other half of the video!
@ram_morey
@ram_morey 5 ай бұрын
Genius! Thank you so much
@FluxAcademy
@FluxAcademy 5 ай бұрын
Glad it helped!
@Fostit
@Fostit Жыл бұрын
I still can't believe this is free! thank you!
@FluxAcademy
@FluxAcademy Жыл бұрын
You’re welcome!
@TheStyleSavant
@TheStyleSavant Жыл бұрын
i can't get the files please send it to me
@userj-s2000
@userj-s2000 7 ай бұрын
Great crash course,
@FluxAcademy
@FluxAcademy 7 ай бұрын
Thank you!
@prabhatsaini108
@prabhatsaini108 Жыл бұрын
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.
@stewkouassi8327
@stewkouassi8327 Жыл бұрын
How frenchspeaker in a small country in Africa tell you : MERCI ! You give real value
@FluxAcademy
@FluxAcademy Жыл бұрын
Appreciate it 🙏
@Applecitylightkiwi
@Applecitylightkiwi 3 ай бұрын
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
@AmitGupta-kg4eq
@AmitGupta-kg4eq Жыл бұрын
wow, Can't believe it's free
@FluxAcademy
@FluxAcademy Жыл бұрын
Best comment 🙏
@haziqjaved604
@haziqjaved604 Жыл бұрын
@@FluxAcademy sponsored?
@njengathegeek
@njengathegeek Жыл бұрын
I had to watch this video before redesigning my portfolio
@ErDige
@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
@katoetonic
@katoetonic 11 ай бұрын
@flux - I know it's an old video, but was there a clonable available for this?
@ViviSchenk
@ViviSchenk 3 күн бұрын
Has anyone had issues with the responsiveness for the horizontal scroll? Do you need to make separate animations with different VH size for the 'move' animations depending on the type of screen? I'm having issues with responsiveness :(
@muldoon67
@muldoon67 Жыл бұрын
Question - would I be correct in saying that none of these animations can happen in Figma. I'm still at the basic/info gathering stage of what Figma and Webflow are/do.
@timmyakkermans4087
@timmyakkermans4087 Жыл бұрын
Thanks for the awesome tutorial! How do you transform your mockup in 3d? My mockup changes by transforming so a rectangle wouldn't fit anymore.
@Grifanos
@Grifanos Жыл бұрын
You need to add perspective to the parent. You can find this in a ... before the + on thransform property
@Asty__
@Asty__ Жыл бұрын
@@Grifanos I think they meant on Figma
@dimaxm7069
@dimaxm7069 Жыл бұрын
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.
@filetmignon9978
@filetmignon9978 Жыл бұрын
if you're asking for a liquid like effect, smoothing alone won't do that, you want to adjust the easing of the animation until it fits.
@onaaaist
@onaaaist Ай бұрын
After adding an animation to a class, the animation only works on the first element. After adding manually it works properly. How to fix it?
@marvellousadeogun9110
@marvellousadeogun9110 8 ай бұрын
Wonderful lesson but I got some corrections; VW and VH are Viewport Width and Viewport Height not Vertical Width and Vertical Height. Please take note!
@VerrelFairullah
@VerrelFairullah 6 ай бұрын
could someone explain how the button animated? thanks for the respond
@shahriarkhaneasan3268
@shahriarkhaneasan3268 11 ай бұрын
Rean, You are a Webflow Boss:) Always follwoing your content for getting latest website design update! Thanks a lot:)
@rabinderoraon4583
@rabinderoraon4583 Ай бұрын
Can Anyone help me with this? For the rotating CTA in the Hero Section Do I have to apply effects as Element Trigger. Cause When I'm Doing its not happening the way it should be. Any feedback is appreciated. Thanks!!
@emmanuelolowookere3623
@emmanuelolowookere3623 Жыл бұрын
Hi @Flux Academy, how can we clone the project? There's no hyperlink available
@playpiano2264
@playpiano2264 Жыл бұрын
Hey Ran to clone the project there is no https attached so the hyperlink is not enabled
@Thrivecraftsman
@Thrivecraftsman Жыл бұрын
How do you put the block in ?
@dandrevs
@dandrevs Жыл бұрын
Amazing content. Do these animations work on exported sites?
@tdk427
@tdk427 Жыл бұрын
Yes. Animations are just javascript written and Webflow allows you to export HTML, CSS and Javascript. But not CMS - be carefull of that.
@tamaratumenko65
@tamaratumenko65 6 ай бұрын
Hi Flux! I tried recreating the horizontal scroll section and it looks great but I keep getting the same problem when I publish the website. I have a few sections on this page and they are all set to overflow hidden and the section where I have the horizontal scroll is not. When I publish and check the page I have a scroll bar at the bottom of my screen and if I use it I am able to scroll horizontally and I go into white space. I realize that this is because of the section with horizontal scroll but I thought that If I set other sections to overflow hidden the problem will be fixed. I can't access your files atm, but I see from the video that you set your projects list (with position sticky) to overflow hidden. If I do that the scroll bar is gone and horizontal scroll is working perfectly but the content that is overflowing is cut off. I'm not sure what I am doing wrong here. I would really appreciate if you could respond. Thank you
@brusbezerra
@brusbezerra Жыл бұрын
I accessed this video so early KZfaq didn't even processed HD quality yet 😂 I'll wait for some more time until Full HD is available haha
@FluxAcademy
@FluxAcademy Жыл бұрын
You should! 🤣
@angelmedina323
@angelmedina323 Жыл бұрын
Hey Ran! This is fantastic, could this be a course by itself?
@FluxAcademy
@FluxAcademy Жыл бұрын
It’s a free mini course!
@Tola_io
@Tola_io Жыл бұрын
i cant find the project to clone on flux academy, just asking where to send it and i cant find any form to fill or call to action
@dwikysetya6513
@dwikysetya6513 Жыл бұрын
Hi! i have trouble with the CTA button animation, i did the hover in animation, the letter animated nicely like in the video but except.. it only did it once, when i hover out the button and hovering in again why it is not animated again? :) looking forward to your response, thank you!
@VerrelFairullah
@VerrelFairullah 6 ай бұрын
same with me
@Alitm254
@Alitm254 16 күн бұрын
The button no more animates the price moving as per month or per year. Please help
@weezyf775
@weezyf775 Жыл бұрын
do you have a vid where you demo how to build a classic section with heading and body on the left and image on the right? such as the ones webflow has in the starter templates? I'm trying to understand how to control the image and it's justification. I have it set to space between, but it does not always stay aligned to the right or respect the padding. sometimes i want the image to expand off screen, but sometimes i want it to grow towards the center and always respect the padding. I cant seem to understand what causes this.
@sekushimausu
@sekushimausu Жыл бұрын
Have you found a solution for this?
@SPINOPStudio
@SPINOPStudio 9 ай бұрын
u need to set the origin under the DIV Block, "style" and then go down the bottom and choose 3d transform and then put the origin to the left @@sekushimausu
@robbertvanempel
@robbertvanempel Жыл бұрын
Super cool instruction video! Thx! But on adding the hover animation, it looks like the lines go over the image (instead of the image hovering over the lines). I tried it to do it as well in Webflow, but I got the same problem. Even giving the image a higher z-index doesn't work. Do you know how to solve this problem? Thx again for all your videos, I'm a great fan.
@Grifanos
@Grifanos Жыл бұрын
Check the parent position settings, I recommend rewatching the position lessons from Webflow. I also had a lot of issues with this, until I start to watch Webflow University 😁
@Svetlana-hk3mm
@Svetlana-hk3mm 6 ай бұрын
You should put the picture inside of the expertise_item, so the picture will be absolute to the expertise_item. I had the same problem, but now it is solved.
@pperez_
@pperez_ 3 ай бұрын
Hi, my slide is scaling towards the middle, not the left like it happened in yours, any clue of what I might have done wrong?
@gabrielfonseca333
@gabrielfonseca333 Ай бұрын
I actually found the answer!!! Here: You have to set the transform origin: Go to the specific overlay (e.g. left) than click on the 3 dots at "2D & 3D Transforms" and click on the middle left dot
@roshanyadav4459
@roshanyadav4459 Жыл бұрын
3rd love from evil-genius
@lasyyca
@lasyyca 4 ай бұрын
Why does my divs scale into center of 50vw, and not to the left side? I did copy every style from divs that he has, but they wont go to the left or right?
@gabrielfonseca333
@gabrielfonseca333 Ай бұрын
I actually found the answer!!! Here: You have to set the transform origin: Go to the specific overlay (e.g. left) than click on the 3 dots at "2D & 3D Transforms" and click on the middle left dot
@okunolatimilehin4356
@okunolatimilehin4356 Ай бұрын
Thank you for this awesome tutorial. Please can I get the link to the Figma file so I can build out this website on my own as a practice?🙏🏾🙏🏾
@FluxAcademy
@FluxAcademy Ай бұрын
Hi, you can request the file here: www.flux-academy.com/resources/webflow-animation-crash-course The link that was in the description needed to be updated, thanks for bringing it to our attention! 🙏
@okunolatimilehin4356
@okunolatimilehin4356 Ай бұрын
@@FluxAcademy Thank you so much. 🙏🏾
@EduardFelegeanu
@EduardFelegeanu 5 ай бұрын
Great tutorial! Thank you. For the loading animation for "Parallax" I don't understand how the containers are resizing on the X axis in the correct way, because mine are resizing from the center (as if the anchor point or the origin would be in the center of the container). I have no idea how to change that, any tips would be highly appreciated. Thanks again for the great tutorial!
@s.d.3525
@s.d.3525 4 ай бұрын
Same problem here
@pperez_
@pperez_ 3 ай бұрын
same here :/
@pperez_
@pperez_ 3 ай бұрын
I actually found the answer!!! Here: You have to set the transform origin: Go to the specific overlay (e.g. left) than click on the 3 dots at "2D & 3D Transforms" and click on the middle left dot
@EduardFelegeanu
@EduardFelegeanu 3 ай бұрын
@@pperez_ Thanks a lot!
@marconarca2706
@marconarca2706 Жыл бұрын
where can i get the project ?
@mjalaee
@mjalaee Жыл бұрын
thanks for the tutorial, Just one question, in the first part of the animation, after I have animated the div to scale down, it does not go to the sides, it scales to the middle! any ideas?
@yubrajshahi
@yubrajshahi Жыл бұрын
try using move instead of scale, set transform X to -100% for left slide and for right slide set it to 100%
@DwayneBrown2012
@DwayneBrown2012 Жыл бұрын
@@yubrajshahi that then creates scroll space to right
@m1xbrd
@m1xbrd Жыл бұрын
You have to set the transform origin: Go to the specific overlay (e.g. left) than click on the 3 dots at "2D & 3D Transforms" and click on the middle left dot
@CoachOlali
@CoachOlali 6 ай бұрын
My man! I cannot tell you how helpful this was. I spent 2 hours trying to figure it out and came to nothing. I am sincerely grateful@@m1xbrd
@puneetyoagarwal
@puneetyoagarwal 10 ай бұрын
Is the intro workshop sessions over ? I am not seeing any mails in my inbox . Tried several times.
@nwankwocharles1130
@nwankwocharles1130 6 ай бұрын
Are the materials only available to registered students?
@mitchohello8475
@mitchohello8475 Жыл бұрын
Thanks for the video. I tried the make the door animation, but both sides a are closing in the middle of each sides... Anyone knows how to fix this?
@bjorn548live
@bjorn548live Жыл бұрын
Use a minus
@m1xbrd
@m1xbrd Жыл бұрын
You have to set the transform origin: Go to the specific overlay (e.g. left) than click on the 3 dots at "2D & 3D Transforms" and click on the middle left dot
@user-sv4ko8sw8j
@user-sv4ko8sw8j Жыл бұрын
Yup brother thanks that trick worked but what is this property what is the link of this 2d 3d property origin left to this animation? Can you tell me a little bit@@m1xbrd
@peabrain4369
@peabrain4369 Жыл бұрын
Is there a way i can clone this site?
@workers_without_border
@workers_without_border Жыл бұрын
Hello Sir. For the Loading animation , the 'Scale' effect doesn't work for me like it worked on yours. It keeps shrinking to the center so it kind of looks funny, but I followed your instruction. Could you please help me with this please?
@DwayneBrown2012
@DwayneBrown2012 Жыл бұрын
Same here, haven't found solution yet.
@m1xbrd
@m1xbrd Жыл бұрын
You have to set the transform origin: Go to the specific overlay (e.g. left) than click on the 3 dots at "2D & 3D Transforms" and click on the middle left dot
@anastasia.kkkkkk
@anastasia.kkkkkk Жыл бұрын
@@m1xbrd Thank you so much!!!
@charlesdavies978
@charlesdavies978 Жыл бұрын
@@m1xbrd Thanks for this tip ...very helpful :)
@Svetlana-hk3mm
@Svetlana-hk3mm 6 ай бұрын
Thank you!!! You have saved my day! You are great!@@m1xbrd
@prazzalchakma7787
@prazzalchakma7787 Жыл бұрын
In my practicing course scale animation is ending with it's being in the middle. Help me.
@m1xbrd
@m1xbrd Жыл бұрын
You have to set the transform origin: Go to the specific overlay (e.g. left) than click on the 3 dots at "2D & 3D Transforms" and click on the middle left dot
@JustAn0therSoul
@JustAn0therSoul 9 ай бұрын
how to make the webpage not scrollable until animation is finished?
@deetech5306
@deetech5306 Ай бұрын
please i need the link to the project
@FluxAcademy
@FluxAcademy Ай бұрын
www.flux-academy.com/resources/webflow-animation-crash-course If you are still having trouble accessing the project, please click "Help" on our website (bottom right corner) and a member of our team will assist you.
@pablomorales2661
@pablomorales2661 Жыл бұрын
please the same tutorial but for figma
@nhacbolerokaraoke4193
@nhacbolerokaraoke4193 Жыл бұрын
Ti to follow in Toby's foot steps if ya know what I an.
@alintd1907
@alintd1907 Жыл бұрын
why is my div block scaling from the middle?
@m1xbrd
@m1xbrd Жыл бұрын
You have to set the transform origin: Go to the specific overlay (e.g. left) than click on the 3 dots at "2D & 3D Transforms" and click on the middle left dot
@sportfanatic9983
@sportfanatic9983 Жыл бұрын
What are your thoughts on their new price increase? CMS plan is up 45% and is now more expensive than even shopify with 0 e-commerce functionality
@alwayjohnrallos7359
@alwayjohnrallos7359 Жыл бұрын
damn, their pricing is really high
@eccentricity9697
@eccentricity9697 Жыл бұрын
CMS plan is cheaper than a Wordpress website because the customer then gets charged a monthly maintenance fee to stop the website from falling apart. Plus you need to pay for a security plugin and hosting.
@sentogma5226
@sentogma5226 Жыл бұрын
This is so cool, but webflow is so expensive nowadays.
@sebastiantoulier5956
@sebastiantoulier5956 Жыл бұрын
wow... im 10 months late and still in quarantine
@Erez-the-Berez
@Erez-the-Berez Жыл бұрын
First!
@FluxAcademy
@FluxAcademy Жыл бұрын
💪
@-The-Golden-God-
@-The-Golden-God- Ай бұрын
I have to say, when I ask users about what they want in a website, most definitely don't want over the top animations and transitions. They just want simple, well laid out content, that's easy to browse on mobile. Don't fall for the designer circle jerk.
@uzairsaeed8840
@uzairsaeed8840 2 ай бұрын
@everyone @bochao @FluxAcademy Can someone please tell me how to create this door? I have tried using both container and div, but the one below is not showing properly.
Top 5 Webflow mistakes beginners make
9:25
Flux Academy
Рет қаралды 66 М.
Easily Improve Your Web Design (With Example)
17:59
Flux Academy
Рет қаралды 45 М.
UNO!
00:18
БРУНО
Рет қаралды 3,6 МЛН
Каха заблудился в горах
00:57
К-Media
Рет қаралды 10 МЛН
Они так быстро убрались!
01:00
Аришнев
Рет қаралды 2,4 МЛН
Double Stacked Pizza @Lionfield @ChefRush
00:33
albert_cancook
Рет қаралды 123 МЛН
Award Winning Animation With Only 20 Lines Of CSS?
6:59
Hyperplexed
Рет қаралды 1,7 МЛН
Webflow vs Framer: 2024 Guide for Web Designers
6:51
Fekry Aiad
Рет қаралды 11 М.
12 Principles to make your Webflow Animations look Pro
53:10
Flux Academy
Рет қаралды 33 М.
Webflow EASY Beginner Crash Course 2024
38:39
Timothy Ricks
Рет қаралды 15 М.
6 Webflow Micro Interactions You Can Clone Today
6:33
Arnau Ros
Рет қаралды 56 М.
Learn Webflow in 16 Minutes (Crash Course)
16:04
Flux Academy
Рет қаралды 1,1 МЛН
JPEG is Dying - And that's a bad thing
8:09
2kliksphilip
Рет қаралды 208 М.
I built a portfolio in 1-hour, 10-hours, 100-hours! (Using Webflow)
17:54
Learn Web Design For Beginners - Full Course (2024)
3:07:31
Flux Academy
Рет қаралды 1,7 МЛН
UNO!
00:18
БРУНО
Рет қаралды 3,6 МЛН