Top Five Interactions Designers Struggle to Create in Webflow

Get the cloneable (affiliate link)
webflow.grsm.io/tricks?path=t...
1:00 Reveal image on link hover
7:53 Popup modal on card click
12:15 Image animations on scroll
21:26 Change site background color when scrolling
26:16 Light mode / dark mode switch
Join my Webflow Wizards Community
/ timothyricks
In this channel, we cover a lot of custom code in Webflow, but I'd like to dedicate this video to native Webflow interactions that designers can find difficult to create. We'll also cover how to apply this understanding to other interaction challenges.
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096

[@person3952]

Little did I know I needed to change the background colour before this. Now I do. Thanks!

[@adaptivecodeio]

Another fantastic Webflow tutorial. You have a great way of clearly explaining these concepts!

[@gorinpav]

This is one of the best tutorials I've seen.

[@TamirYankevich]

Incredible video! So much knowledge - it’s very clear that you’ve been doing this a long time and are an expert! Looking forward to seeing more ◡̈

[@sharvantg6030]

Probably the only tutorial video where I watched the entire video on normal speed. These are value bombs. 👌🏼

[@dankort]

Dude you're soo cool! Just a straight forward tutorial. Without all this unnecessary long intros, catchy welcome voices or strage looking faces in the thumbnails. Love it, keep top the good work👍

[@jay24]

Your voice is so calm, even if I do not want to learn about this, I am gonna listen to your video as a meditation theme.

[@rubenccnv]

Wauw, i was struckling with the first interaction bug and now i can finsish an important project. Thank you so much. I love learning this stuff from you!

[@chakhmanmohamed9436]

hi Tim, thanks for the tutorial. i couldn't implement the second animation, it works in the first time but now once again. did everything in the video.

[@cre-ate]

5 amazing T.RICKS - like always a great video to watch. Thank you

[@vincybadman871]

The hero we needed. Thanks for this tutorial Tim.

[@jackiee91]

Great content. Super helpful tips on how to create certain effects. Gonna second Ahmed's comment about organizing the sections of information/showing a preview of each to allow the viewers to get a quick idea of what they're going to be learning, and where in the video to find it (e.g. timestamp). Thanks for your work!

[@Fizzy2]

You're so underrated man - I wait for your videos, keep it up!

[@zecostinhacodm]

One of the best in the world

[@jacekbaczkowski4257]

amazing video! concise, precise and just what' s needed!

[@JeridanK]

This is awesome, thanks Tim!

[@krsnabantai]

Best webflow channel. No doubt.

[@nikolatripkovic5322]

Wow, I watched the whole thing not even trying to replicate for now, but just admire pure knowledge bomb that you created here. Amazing work man, you got my subscribe!

[@ahmedkhaled1068]

Your teaching style is very clear and concise! However, one thing I'd suggest implementing in the future is having a simple run down or quick preview of what we're gonna be building in a specific tutorial. That way, we won't have to skip sections to find out what exactly is coming. Thanks for taking the time to build these incredible interactions! Huge fan of your work.

[@timothyricks]

Thanks so much for the feedback! That’s a great note

[@Ajourneycalledblessed]

I totally agree, a tutorial from start to finish would be great.

[@rhealisa9268]

Completely agree. It's a great suggestion.

[@zainmaqsood5734]

Exactly.. good suggestion

[@zainmaqsood5734]

@@rhealisa9268 are you a webflow developer??

[@Svetlana-hk3mm]

Your explanation is great! Thank you!

[@sherlockholmes7512]

We really really need more videos like this Soooo helpful thankk you

[@danielndrssn]

Thanks for yet another great tutorial!

[@Benga-Eno]

BRO. What a pro 🙌🏼

[@michaelpowis]

Give this guy a medal

[@gianfrancorusca4157]

This is awesome. Thank you for the great tutorial!

[@Reeka7]

Can't Thank you enough! Your content is GOLD! 😎😎

[@Sergy_Kondrashin]

Thank you! Fantastic tutorials! 🔥🔥🔥

[@mariumbegum7325]

Insightful topic! Great video

[@IUSTITA]

This man is a genius.

[@adarshgoldar]

Thanks for another great tutorial!

[@joelm1988]

Really great tutorial, mate.

[@messyjetski2549]

excellent video my guy! learned much, much appreciate it

[@delfs413]

Glad I found your channel!

[@ahmedcompak]

this is awesome thank you

[@seyferf]

I wish I could double like, this tutorials are awesome!

[@paulmcdevitt2038]

Very nice stuff and love the T.Ricks tee-shirt :)

[@thewebart]

Thank you Timothy.

[@michelangelodecia]

Great tutorial, thanks!

[@mattsymonds9652]

Love this Video Timothy, I would be very interested to hear your thoughts about mobile design philosophy when it comes to translating a layout such as this to be effective on a mobile phone screen - it's something I and I am sure many other designers struggle with, and yet it's really important to offer great phone experiences on many websites, especially any that provide services, information or products to people.

[@avelinileva]

Amazing! Thank you for this :)

[@TheMarouuu]

LOOOL, what a name, T.Ricks :D You hit the branding jackpot with that one, good for you :)

[@Sizzahandz]

Dude you are the Bob Ross of Webflow for real!

[@dominousman5729]

Wow brother really awesome

[@nataivanova]

thank you!

[@deepto5640]

Dude! you are AWESOME!

[@ArtfulUI]

nice tutorial! thank you!

[@kerim4973]

Love it man!!

[@HakanErtan]

this video helped me a lot. thanks!

[@JorisTillmans]

Superb!! Thanx a lot!

[@jenniferward6821]

terrific thank you

[@AyushKumar-yn5co]

This is really helpful

[@NotSoYeti]

This is Good!

[@eduardomatos405]

Keep it up! Nice videos bro

[@OliRancidTen]

Hey Tim, love the videos. I’d like to see what a mobile version of these interactions would look like, considering 60% of web traffic is mobile I’d like to focus on my mobile site more so than desktop

[@au_fuad]

finally I found this !

[@shokhrukhrakhmatov4221]

Thaanks

[@lukasrudrof4011]

Very helpful stuff! Keep going;)

[@michaelimmovilli5094]

That's Awesome. I created the body background change but is a bit buggy when the colors change. It's like they are overlapping each other. I tried to change the start and end points several times but still, some section are like flashing

[@gabrieldaughtry839]

Love this video, thank you! How would I get the first interaction to work on click instead of hover?

[@kevnn6443]

Another great video! If you had a webflow master course, I would definitely enroll and pay to learn from you! Your instructions are so easy to follow! Happy Thanksgiving (from Canada).

[@timothyricks]

Thank you so much!! Happy Thanksgiving!

[@eslamsalah832]

u r amazing!!

[@jpponline1]

Great vid! One question? How would you remember the switch setting for dark/light mode if you enter a new page.

[@adepurnama1642]

THIS IS GEM🙌🙌 Also loved that fonts, what fonts did you use??

[@davejemison]

Great tutorial Timothy, I'm struggling with one part. Is there anywhere I can take a look at a share link for this? Cheers

Hi Timothy, great video, thank you! Have you ever try to style the search bar, button, suggestions in webflow, I am struggling any time I try, could you make a video about it, if you already figured it out, please?

[@dominousman5729]

Thums up for you

[@luisabalan63]

Hi! your tutorials are so valuable! I've been learning so much from you! I'm wondering if you can do a video on how to switch between 2 language modes on Webflow? I'm in Canada, and sites that need to be fully functional in both English and French is pretty common for certain industries!

[@au_fuad]

hi, your music test is awesome !

[@annefeldman1896]

Love this tutorial! I've bee trying to implement the first interaction you show here, but what I'm struggling with is setting a default state, so that the first item in the list is selected before the user interacts with the menu. Is this possible?

[@jon_patterson]

Great tut! Quick question... what font are you using in the headlines?

[@samanthavolpe183]

Trying to implement the first example with the hover reveal! I'm assuming there's some code out there that will make it so that the first tab is opened on page load so that space isn't empty? Anyone done this? Hard to figure out since it's a CMS I can't seem to make a counter interaction that leaves it open

[@gamalieljustinflores5109]

Hey Timothy! Appreciate all of your tutorials! Quick question, is there a way to only allow one pop up? I did your tutorial and I shrank the pop up not to be 100% height and 100vh. When I click other cards while a pop up is active, it opens another pop up

[@jennifersanjines1111]

Timothy I'm such a fan of your videos! Do you have a good reference video or set of tutorials even written that would help me better learn the child/sibling relationship pieces. I follow what you're doing but I feel like I'd get hung up on the relationships I'd love to have something to refer to. Great video!!

[@timothyricks]

Thanks so much!! Yes, WebFlow has a great video for understand parent, child, and sibling elements at kzbin.info/www/bejne/iZfJf2aLZtaCopI

[@mariusbauer5047]

How do you put that code editor symbol next to the "eye" symbol on the top left of the editor?

[@jamesharr539]

How did you set up your logo so that it would change based on text color?

[@MikeYusi]

Do you have any videos on how to create hotspots on an image?

[@brandontomado9547]

pfew so glad I found this, awesome! one question regarding @7:30: if i want to place a button inside the links__img it isn't clickable I tried adding a links__img-button class and setting pointer events to 'auto' on a extra line in the html embed which works because link is clickable but when hovering over the link, the hover effect still reads the latest entry.. is there a different way to 'exclude' the link from responding to the hover but still be clickable?

[@timothyricks]

Probably a simpler way to do it would be setting the links__img to display none by default and display block on hover in. Then on hover out, you could set it back to display none.

[@marcelschymiczek1251]

Soo good! Is it possible that you share a webflow access to this page?

[@danielheryanto19]

if i want the text paragraph text of every pop up to be different, how can i do that?

[@muhammadumeralam3591]

Instead of writing custom code for 1st interaction, u can hid the image after opacity turns to 0 on hover out.

[@zainmaqsood5734]

Pretty 😍😍😍😍😍 osm man

[@gowithmonir1686]

Please make video in Top 5 interrogation.. Like with payment system or other

[@josephberry4188]

Reveal image on link hover...... Another simple way to stop the image from activating the link is to set the image to display none on the initial state and then on the hover display block.

[@BlakeFeldmanDesigns]

Hey Tim! Thanks so much for this awesome tutorial! I tried to embed the exact same code as you and for some reason it isn't working to make it so the images don't pop up when I hover over the place where they Images are. Do you know if it has anything to do with the new updates or anything along those lines since this is an older video? Thanks for all the help!!

[@timothyricks]

Hi Blake, this should still work even with the new update. I have an example in the cloneable. But custom code isn't required anymore since Webflow has events none in the style panel natively now.

[@samanthavolpe183]

This is awesome! Just joined your patreon in case you expanded on this more. How might you change out buttons or images when in the other mode? For example my logo image needs to change over.

[@timothyricks]

Thanks so much for the support! To answer your question, I would create two global classes, one for all light-mode objects that need to be hidden in dark-mode, and another for all the dark-mode objects that need to be hidden in light-mode. Then by using the same light/dark interaction, I’d switch them from display block to display none so it would hide them and just switch them back on second click.

[@samanthavolpe183]

This was so helpful! And I caught your new lesson that uses the new Variables feature. Thank you as always!@@timothyricks

[@AriSpinoza]

What font are you using here?

[@mauricioguerra2151]

Hi man thanks a lot for this, I have a question, how do you avoid vertical scrolling in a full screen popup?

[@timothyricks]

Hello, you can set the body to overflow hidden on click of the popup card using JavaScript. I cover how to do this in this tutorial. kzbin.info/www/bejne/oHTKnaSefrSUqZo

[@atnsn]

This is so helpful, thank you! Also, how were you able to change the color of your Webflow? For example your classes are colored purple, how would I be able to make mine like those? Thanks!

[@maxthum3453]

Following

[@timothyricks]

Thank you! I wrote a custom Google Chrome plugin a while back for WebFlow that changed it to dark mode, added the purple, and made the embed module full screen. Looking back, the dark mode was too dark so what you see in the video is a new plugin I’ve been working on but haven’t released yet. chrome.google.com/webstore/detail/tims-web-plugin/oggfflpobpmaaolghdfoofejdjldnnjl?hl=en If you right click in WebFlow and click inspect, you can change the CSS of how it looks but for those changes to be there next time you reload the page, you’d need to save them in something like a plugin.

[@atnsn]

@@timothyricks Thanks!!

[@paulineviseur2896]

Do you have a trick so that the image on the left remains fixed when we have a long list on the right that should scroll?

[@timothyricks]

Yes, I have done a tutorial on that before kzbin.info/www/bejne/baKsmmRjbtV9pMU

[@gabetiger4104]

How come your class selector is purple instead of blue?

[@TheHennes36]

Im actually struggling with something way easier seems like 😂... But I wonder if you could help me out there as well: How can I configure my full screen menu that it automatically dissapears when I click on a nav link? Right now I click on the link and the page scrolls to the defined section but the Menu wrapper doesnt dissappear 🤔

[@timothyricks]

You could set an interaction on click of the nav link that closes the menu, but on second click of the hamburger icon, the menu wouldn’t open because second click is set to close. It’s best to leave the interaction on the hamburger icon to open and then close and just add a little JavaScript to cause the user’s device to click on the hamburger icon whenever they tap the nav link. For this to work, the hamburger icon needs to be a div instead of a link block. I have a tutorial for this at kzbin.info/www/bejne/oHTKnaSefrSUqZo

[@PrakashGD]

Link hover effect doesn't work on dropdown component.

[@RobertTrew]

How do you link only one CMS field to the Pop up?

[@RobertTrew]

Would be nice if you showed how you made things first for that section. Is it Indivusual CMS or on one collection?

[@davidfitcher2953]

Baby Timmy

[@walisonmartinsw]

👍

[@vineetboyle]

noice

[@delfs413]

Quick question technically it applies to all with the same classes across other pages, right? Does the toggle stay on dark mode when you switch pages or does the user needs to turn it on again? Thanks!

[@timothyricks]

Hey John, the user needs to turn it on for each page they visit so this is ideal for single page sites. Saving the user’s settings for when they visit other pages would require custom code to store a cookie on the user’s device.

[@delfs413]

@@timothyricks This helps a lot, appreciate it!

[@RealKilli]

@@timothyricks Is that hard to do? I would be really interested in that! :)

[@timothyricks]

@@RealKilli It's not hard if you're familiar with JavaScript. I'm hoping to be able to fit this into a tutorial video in the future.

[@hotxd1]

@@timothyricks This would be a lifesaver! Really struggling on making a persistent dark mode

[@Belisiario]

7:55

[@moe-alhakeem]

I found this video at 999 likes. So I had to do something about it

[@timothyricks]

Haha, thank you!!

[@andreasgaida7892]

Please grow long hair and a beard, because I just found Webflow Jesus.

[@proarquitecturaconstructor1448]

thank you!