Advanced Menu & Slider Interactions in Webflow
HTML-код
- Опубликовано: 8 сен 2024
- In this tutorial, we'll setup a perspective cms infinite slider, custom trailing cursors that change per section, and an immersive full screen menu with 3D animations from Spline, lottie files, and nav link staggering. We'll create interactions that add character to the design through advanced hover states and micro interactions.
01:07 - Slider Setup
05:19 - Building Slider Controls & Interaction
10:14 - Adding Bends to Slider
12:20 - Testing The Slider
14:04 - Creating The Custom Cursor
17:51 - Changing The Cursor on Hover
22:35 - Hiding The Cursor on Hover Off
26:18 - Animating The Menu
31:22 - Adding Staggering to The Nav Links
33:44 - Fixing Menu Bugs
35:42 - Crafting Link Hover Interactions
Get the cloneable for this project (affiliate link)
webflow.grsm.i...
Get the Splide slider code at www.notion.so/...
Get the anime.js stagger code at www.notion.so/...
Learn more about wizardry for Webflow at wizardry-techn...
Join my Webflow Wizards Community
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.i...
You're a Webflow God
From a beginners perspective this looks so professionell. And the speed in what you do all this is crazy. Awsome tutorial. Thx
T.Rick, has all the Webflow infinity stones!!!! Dang, it! Genious 👏🏽
When I get successful in my freelance career, I'll owe it to you Tim! Thanks for such gold content!
Did you get successful yet?
I learned more from your videos than i ever learned on school
Oh wow! So glad they’re helpful
Spide? Something I'd never heard of if Timothy was not here. Thanks, sir. I think Britain should give you "sir" status, you are giving so many awesomeness to this community.
Do you know I was searching for more tricks about animation in webflow? Your the answer Tim..thank you
You are changing the game! I This is AWESOME.
Thanks so much!
Dude this is the greatest video I have ever watched on youtube! I am moving from Wordpress to Webflow and this is GOLD!
thanks for the video man!
This is unreal Tim, thank you endlessly
I love watching you work! The Tricks you drop are just awesome! (pun intended) Thanks for your videos man. Really appreciate it! :)
You make things look frighteningly simple.
man i feel like watching christiano ronaldo playing football and try to do the same in my garden, in fact it takes me 3 hours but thanks to your explanations job's done anyway, cheers from France t.ricks take care
meticulous work done--great attention to minor details. Seem like you have invested a great amount of time on these things. A true inspiration. Eager to know your story man. Wanna hear from you, it's a request
I absolutely love the videos you put out. A literal genius
Keep the hard work man! Love your videos! Just a recommendation, try to EQ your audio channel, everytime you hit your keyboard/wacom/mouse sounds pretty loud on the low frecuencies and in it can get very distractive.
Thank you so so so much! Your content is really helping me to get a better understanding of webflow!
cant believe u made aclone for us man I LOVEEE YOUUUUUUUUUUU
This looks super cool! Been waiting for your new videos. Learning so much from these, keep them coming, Rick!
Thanks so much! I'm glad they are helpful. Will do
Please be careful with changing the code in the links under the video. I had issues with arrows, couldn't find the solution, only to find that the code in clonable is different. It now works :)
Regardless, thanks, this is awesome.
Thanks so much! That’s good feedback. I just corrected the update to still allow multiple sliders per a page but still work with this tutorial video as it stands right now.
hey- I'm having the same issue, what did you fix?
Love your videos, very inspiring! Thanks 🙏🏻
Super inspiring stuff here. Thanks a lot
Omg, amazing, thanks for sharing your talent!!
Whauuuu Timothy, that was really good. Congratulations....
Always so inspiring, Tim!
Thank you!!
Great guy , simply great! and generous to share!
Glory. Pure glory....
wow again! thank you!
Thank you !
Damn man this is awesome! Thanks for sharing all this gold with us 🏆
One thing I wondered was.... on a menu that comes out from the left side that has a 50vw how do you make so that when you click on the right side it closes the menu. I may have missed you answer this in one of your videos.
Thanks again for these amazing videos!
Thanks so much! I cover how to do that in this video. ruclips.net/video/jCglqhIOas8/видео.html This can be done with the wizardry jQuery builder too. Just on click of the left side div cause the user’s device to click on the hamburger icon.
@@timothyricks Legend!! Thanks man, keep doing what you're doing, it's very inspiring 💪
Wow.
Just wow.
Webflow Wizard at work 😅
incredible!
I love your videos!
Legend
Hey, you’re using Figma now!
For free????? You're so cool
Thank you for your work! Is there anyway I can change the color of lottie? I want the menu with different color, but lottie stays in purple. Thank you!
Tim! I'm having trouble with this, too. Is there any way to change it?
I fixed it! Go into the code on each Slider Wave and you'll see the "fill" hex #, change it to the hex color code that you want and save & close. Do this for each slider!
Great Work! Sadly the Page now "jumps" when changing slides, but this wasn't the case when you first made the design. Maybe you find time to take a look at it some day :)
Thanks for the heads up! I think I was able to fix it in the cloneable by updating the Splide JS and CSS cdn links.
hey @timothy thanks for the great video. I'm getting stuck at the wave svg code. can't make mine full width ?
Great tutorials, one thing tho, your time stamps need to start at 0:00 in order to work :)
Hello, thank you very much for this video !
I noticed that when cloned and published the slider only shows 3 frames at a time unlike in your video and I'm not able to fix it.😥
Do you have any idea please?
Very Nice Video. But unfortunately nothing works by me :/ very hard to get this. The CMS is already without function and i cant place images in there
Hey Tim love the videos having trouble getting this to work on Mobile as it doesn't resize for some reason. The project you have is responsive to different devices, but as soon as I paste it in my project it stops working. Please let me know what I can do. Thanks!
I followed every step but somehow neither the controls aren't working nor is the slider doing the horizontal scrolling. I even tried to clone the project but it doesn't work too :/ Can someone help me please?
Awesome video Tim! One quick question. Could the styling from the overflow-div not be added to the body instead? Or does that casue some issues that i am not seeing? :)
Thank you! When overflow is set to hidden in WebFlow on the body, it prevents the page from scrolling on the published site because it hides both the x and y overflow.
Hi amazing tut please try to given figma file too
stopped working arrows in clone project
Hey there awesome work! I was wondering if there is any possibility to include text elements in the splide loop so that they basically replace the image element? splide documentation doesn't mention this at all, tried to set it up with vivibility clauses but mmmehh so far no luck...
same with embedded video actually
With this version, anything can be put inside each slide as long as each slide stays the same width as each other. Feel free to check out the cloneable in the description to try it out
@@timothyricks i figured it out on my own with a little brain ;) but thanks so much for providing your knowledge so selflessly!
So glad it worked out! My pleasure
...but i ran into another issue, which is with the multiple slider setup you provided: even with unique class names it doesn't accept multiple slider setups. the splider documentation states as following:
"The Splide constructor accepts an ID, a class name or an Element object. Note that only the first element will be initialized even if using a class name. To apply it to all elements:
var elms = document.getElementsByClassName( 'splide' );
for ( var i = 0, len = elms.length; i < len; i++ ) {
new Splide( elms[ i ] ).mount();
}
and i think that might have something to do with it but i am too much of a noob to figure out what i need to add where - could you help me fix this or understand what is going on?
Hey Timothy! Did you find any way to keep the custom overlay open, while browser is resizing?
how do you create the click interaction to make this slider a usable menu? can you add interactions to separate menu items for a cms slider like this?
can you swap the photos for video with autoplay?
Hello Tim, I love your tutorials!
I just tried this out on a tab section. I could replicate what you did for the first tab and it worked perfectly! But for the second tab, I used the same classes and CMS collection but the slider didn't work. Any idea why?
Thanks for always putting out such great content and tutorials! (:
Hi Amanda, for splide each of the main splide divs need a unique class and then the slider code would have to be copied for each slider and changed to target the unique class of each slider div. Each block of code only works for one slider. If you’re going to have multiple sliders on the same page, slick slider might be better because one block of code works for all sliders. ruclips.net/video/AG_REG9p61E/видео.html
@@timothyricks Thank you so much! You're incredible. It works now. You should do a tutorial on how to use and style splide paginations too, if you have time. (:
@@timothyricks Would it be possible to have a slick slider and a splide one on the same page or would that break the code?
@@joyceofalltrades9734 I don’t see why it would cause any issues. Also, I recently updated the splide code in the description to work with multiple sliders without having to duplicate the code.
@@timothyricks That's amazing, good to know! I was using a different code work around for another section of the page and it disabled the splide controls so I will use your solution moving forward! If I use the updated code, will the two splide sections still be able to be interacted with separately or will both scroll at the same time?
i changed wizardry to phtography and somehow now it doesnt fit in the screen
Great video Tim! For some reason if I want to use 2 instances of this slider on the same page it doesn't work, even though they are the exact same in terms of structure/ classes, can we use the slider twice on the same page? Thanks for your videos!
Hi Babus, sadly when targeting with a class in Splide slider, the slider will only apply to the first set. For multiple sliders, some of the code block has to be duplicated and each set of code needs to target a unique id per slider. I've updated the code in the video description to show that option.
@@timothyricks You are the man! Worked exactly how I needed it to work. Thanks a ton 💪
Hey man! Great content! Is it possible to do this draggable slider without the CMS collection? I'm asking this because I'll need to export this as a static page. Thanks!
Hello! Yes, it should be possible. You could just use divs in place of the collection list, wrapper, and items.
@@timothyricks you are a beaaast! 👊👊👊
Hi Tim.
How we can apply CSS on the next slide and the one after the next and for previous ones as well.
Thank you
Hello! I think it might be easier to edit the style of all the items in WebFlow and just change the active one by using splide’s active class.
@@timothyricks Thank you,
We can also change CSS styling of next and prev class too.
Correct me if I am wrong Tim.
How i can do this without cms? Thank you
Has anyone here figured out how to implement more than 1 of these splide sliders on a page in Webflow? I need to have 3 of them on one page. The 1st instance I have works fine, but the 2nd and 3rd don't drag. And the 2nd/3rd arrow controls affect the 1st carousel.
You need to copty and paste the 'Before tag' code and label them as slider1, slider2 etc and name the items in the sidebar.
Curious, how this looks like on mobile
Hello Timothy, thank you for your informative and well made videos.
I have one or two problems here with the mouse cursor
When you are changing the text "drag" to be transparent (before adding the is--larger class to then affect the text in a different way) you are affecting it from the cursor class however on mine I can only effect the color of the text from the paragraph class not from the cursor class.
How are you able to manage your "drag" text color from the parent class? cursor__dot2 in your case.
Hi Tom, it sounds like a font color must be applied on your All Paragraphs tag. If you reset that color to inherit from its parent, that should fix it.
@@timothyricks Hello! Thank you greatly - for some reason there doesn't seem to be an All Paragraphs tag or class in my project - can't find it anywhere.
That being sad, I have fixed the problem due to your explanation! It was an inherit issue. Thank you!
@@timothyricks The other problem I am having appears to be with the code, I do not want to over ask here, and I am currently looking back through it all to make sure I did every step correctly, again, thank you for your videos and work. Keep it up man
It needs a very specific class called splide hahahah 2:06
this isn't responsive right?
Yes, it is. I made the cloneable responsive. webflow.com/website/TRICKS-Menu-Slider