Epic Webflow Website Deep Dive (Awesome Animations Explained)
August 19, 2024 2024-08-19 16:26
Epic Webflow Website Deep Dive (Awesome Animations Explained)
Finally going over the NEW Flux website. In this video, I go over some of my favourite aspects of the new website, namely 4 awesome animations.
Building this website and challenging ourselves to do nearly everything natively on Webflow was an exciting and challenging task. Thing is, Webflow makes it easy. The hard part is figuring out how to creatively implement your vision using Webflow.
Once you have a decent handle on Webflow’s functionalities, you can truly start to get creative with how to make things happen. This is the beauty of Webflow – the possibilities truly are endless which really allows you to create some mind-blowing websites
What are your thoughts on the interactions in the new Flux Academy website?
00:00 Intro
1:37 Loading animation
7:30 Hero scroll animation
12:00 Mouse movement interaction
16:12 Second mouse movement interaction
–
Learn how to build custom websites with Webflow FAST:
https://bit.ly/WebflowWebclass2020
–
Find me on other social media platforms:
Instagram: https://www.instagram.com/ransegall/
Twitter: http://twitter.com/ransegall
LinkedIn: https://www.linkedin.com/in/ran-segal…
–
Gear & Book Recommendations: http://bit.ly/2ohFOuj
#webflow #webdesign #websitedesign
Thanks for watching the video!
source
Comments (38)
@BlueWhaleDevelopers
how much harder can you make it look?? you're showing off how good you are but not teaching at all
@vishalyadav630
I have multiple page load interaction some works some not. How to resolve this?
@guillaumemercier3536
I want to change the video in a video player through a button or thumbnail it is basic, common on many website how comme it is hard to figure it out how to do it in webflow?
@ChristianDavis-xd5hu
Looks great. I have a quick question. How did you get the absolutely positioned elements behind the header text on the home page?
@adaptivecodeio
I know this vid is two years old but still very valuable, thanks for showing your thought process and how to get these effects in webflow!
@Paladugula
Can you make some custom templates and put in public.
@anudeepananth
The Enroll now button at the bottom of the page does not have a link behind it… you might want to fix that…
@fifthmaple
wtf lol… i dont understand any of this…
@MrLinknel
great vid. I would consider putting your camera view in the bottom left instead as you are covering a lot of the style panel where most stuff is going on when working in webflow xx
@julio.a.arango
Hello Ran, I use learnworlds for my academy but it has a lot of design limitations. is there a video n how you created the "academy" part of the website using webflow?
@Daddleo
very cool thanks
@Rahul-ih8pb
Awesome! been using you as a mentor for my studying and breaking down key points in my ventures👌🏽thank you for content Ran & Flux Team ! Digital Gangstas;)
@igal1988
Beautiful
@thedigitalnoodle4021
The thing and the thing, which moves this thing and that thing. I thing I get it.
@ikanengnongena3361
I love the intuitiveness of Wbf! Super helpful.
@chrisbutlerart
absolutely love your content. Just getting started with Webflow and you're easily the best communicator on the topic that I've found. But I have to say this with total love: its pronounced "HUV-er"! FOR THE LOVE OF GOD…."HUV-ER" not "HOE-VER" 😀 But seriously…outstanding work.
@vasu9760
Bad UI/UX needs explanation 😜
@WIThEMaN2
Very nice animations, but when I visit your website on google chrome it's very buggy and cracky and not smooth at all. Is this a webflow problem because I want to learn webflow but I don't know the responsiveness of webflow. If your site is not responsive then my site will definitly not be responsive and smooth.
@bodiequirkcreative2998
Hey Ran! First, I owe you a huge thank you, because of you, I have found the web design software I have always wanted in Webflow! Second, I would really love a video on how you integrate your site with Teachable. Your other video from a couple years ago on building a Teachable Sales Page was my first introduction to Webflow. When I go to your Flux Academy website now, it seems that you have deep integration between Webflow and Teachable. Are you using Zapier? Explaining the updated relationship between Webflow and Teachable would be really helpful for us who use Teachable but want to give it the Webflow touch. Thanks Ran!
@nicciofthevoid
May I ask how do you make the responsive connection line for all the avatar photos in the Join 3000+ mouse movement section?
@adnanamin3666
May I know what is the font that you have used throughout all of Flux websites?
@Stuartsmith04
Awesome Ran! Would love to see a breakdown of those video custom mouse hover interactions
@beeartbranding9665
What about Credit Clearing in Israel if I want to build a store?
@AndresLopez-zj2ki
you are a legend pal
@jas2984
Wonderful website, bro amazing, I have tried it, but can't do page load animation and the scroll animation in same time
@JuanRojas956
How does a page loader work? How does it know when the page has fully loaded? Can I also just play the loader for 3 seconds and then show the page?
@lucasmmaidana
Great video! webflow is awesomee
@fractalelement857
is there any kind of design job where i don't have to be creative but more like executioner ???
@andrekremmer7104
THX for that
@0-Will-0
18 seconds time to interactive. Lots of unnecessary animations. This could be a lot better if it was simpler and faster.
@svalinaj
Here's a proposition: mirror the mic stand position to your right. I believe this would better balance the composition since your laptop is on the same side currently. Great video, Ran, keep 'em coming!
@iDATUS
Extremely nicely done video. Lots of actual real life objects.
I can't say I like the website design, hero has too much going on for it.
Peoples face icons seem a bit harsh, maybe soften the edges with page colour outline.
@SegrainesAMV
It's amazing how you can easily implement complex css concepts on websites using webflow
@patrikhorny4989
I have a question. What's web-flow really for? I see that it is some advanced page builder but what advantages come from it? Like is it easier to learn these cool animations, events, and basically making the whole website in webflow or you prefer writing code manually? I'm learning web development and I'm wondering if one should stick to learning to code or to take a look at web-flow.
@alexhartan
Interesting to see the thought that went into your process.
Great video!
5:50 – it's really reassuring to see that not only my websites have a gazillion animations
4:20 – here it's generally a good idea to use scale instead of height, to optimize for the client load
@sauravchoudhury6314
Respect for the work 🤟🤟 Ran can u plz share some light on the head in the hero section, how did u design it. Plz do reply. Thank you
@wyattcoe8825
Excellent animations and explanations! Would love a quick demo on how you created the navigation rollover effect.
@digitalminister5687
The net thing with peoples faces isn't working on mobile. When I tap on one of them I can't see the name of the person.