Advanced Transition Interactions in Webflow
HTML-код
- Опубликовано: 2 июн 2024
- Get the cloneable for this project at webflow.grsm.io/three-column
Join my Webflow Wizards Community
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096 
Хобби
I feel like Neo from that scene in the Matrix where he says "I know Kung Fu". Thanks for another brain melter, Tim!
Yep, I'm soo gna join your patreon when my freelance webflow career kick's off. Until then I'll enjoy these snippets!
The way you maneuver through webflow is like art to me.!! You’re insane dude, you’re really good!!!
And..... he's back!!!!
this is amazing man you've really bridged the gap for people that aren't skilled with JS
Man Tim your skills in Webflow continue to amaze! Your tutorials have helped me so much in my design career 🎃
Thank you so much! So glad to hear that!
I understood like 90% of this. Thanks Tim!
Your tutorial might be the best, waiting for a new one every day lol
Wow. This was amazing. You just keep dropping these gems 💎 , you’re a legend! Now I’m gonna go learn how to do bg videos with audio on your Patreon.
This was nuts. Can't get enough of the content to level up the webflow game for us. Still, a little intimidating this, but need to check out the animating with classes video and a few more. Keep em coming. Will join Patreon at some point if these is the nuggets you provide there.
you're a mastermind
Another amazing video!
Very good video, my only problem is that I don´t know how to get the external video sources for example from youtube, for the card_video element.
What an amazingly insightful tutorial. A wealth of knowledge. Fairly new to webflow(5 months). The combo class under hover state is new to me. Curious as to why you would do it this way rather than adding mouse hover on interactions? Or would this give you the same desired effect? I'll try this way. Maybe more efficient, and hover more control over elements.
Thank you so much!! My mind is super blown.
Can you kindly show us how you made the calculator for EMs/pixels and the code builder? this will really be super! Will you be teaching us how to built such calculators?
A man who knows his craft damn you fast 😄
So rad!!!
This is super amazing. Please how did you create the breathing effect (interaction )on the play button. When you mouse hover the play button
This is amazing, thanks. How to make the video play unmuted?
Nice One.
Thanks a lot for this. I have really found your channel extremely helpful. Could you please share a way to insert videos in half screen layout. I have been trying to do it using webflow but have only faced frustration.
It is magic!
Just finished a Course in web design from Udemy, learned the basics of Figma and Webflow. Which is nice. I can now build a simple website with some simple interactions. This is next level shit tough, I’m really blow away.
Feeling pretty demolished looking at your (for me) quite complex projects (they are really awesome, don’t get me wrong) and I wonder if you have like a course where you build a webpage from scratch, design and then in Webflow + interactions? Maybe one that focus a little more on the not so experienced student? I would easily pay a good amount for that kind of course which really explains the why and so on.
I saw I can follow on patreon, would that benefit me which is not so experienced? I need to get to know the background of all the elements so I understand them.
Thanks and have a good one!
Excellent tutorial. One question The background videos are direct links to a local server?
Love it. How does setting the padding to 38% control the height of the absolute-positioned video? You got rid of the height of the card and set just a minimum height and then set the padding. If anyone can answer this that would be awesome! Thanks!
You rule.
This looks so amazing! Thank you for this video
I've tried it on my self but I bump into some issues during the project.
For example as if i clicked the link box, the videos are muted and they video is showing the whole sequence no matter which state (.is--closed or .is--playing) it is
Is there any solution for this problem?
Such a boss
Potentially a dumb question but video embed itself is the video hosted on another site if so what service did you use? and also how have you hidden its player controls to use your own
this please!
Good question! I used netlify.com/ to host the background video and embedded the file as a background video to be able to create my own pause, play, mute, and restart controls. I have tutorials for these on Patreon.
@@timothyricks awesome thank you!
Please make a video on seamless transition between pages !!
Is there a way to have a button to restart the video or any player controls?
Well... You're a wizard
Hey TIM! Any idea why this project is not working when cloned into another project? All the custom code and HTML were copied also. It works when cloned and published, however, when copied into another project it doesn't work. Thanks!! Appreciate your work!
Would something like this be possible within a CMS Collection List?
I think so! The collection list would probably need to be limited to only show three items. We can also save background video urls ending in .mp4 inside a plain text field in the CMS and then reference it inside the custom code embed
WOW
This is phenomenal stuff. But cleaning classes became pain in the ass xDD
As a beginner i found this quite challenging. Especially the part when you kind of make interaction just by adding and removing combo classes and using transitions. I hope i can find a video of yours explaining it.
Tim creates advance interactions and websites, not beginner ones. To understand his videos you should be comfortable with jquery and webflow in general.
The difficulty of this page can’t be created of you are still a beginner :/ I’d recommend you to start with beginner tutorials before starting with Tim’s ones…there’re plenty out there.
I am happy finally someone creates content for really advance Webflowers 💙
Hi Chakhman, here's two concepts that are important to understand for this.
1. Scaleable Typography
ruclips.net/video/WJz3zBhen2A/видео.html
2. Animating with Classes
ruclips.net/video/YJt7n97yDgw/видео.html
@@timothyricks Hi, ricks. I would die for you. Thank you